/* Motor de movimiento Aurora Boza. Diseño §6.2, §7 y §7-bis, plan T3. [LEÍDO] Revelados, apilado con sticky, cursor propio, velo de transición. Nada de librerías. */ /* Su sitio es tokens.css, que es de otra tarea: cuando esa toque, se mudan tal cual. */ /* INCRUSTADA y no `url()`: era una segunda petición, y hasta que llegaba la cortina salía negra pelada [MEDIDO 06-09: 143 ms con la caché vacía y 300 ms de latencia]. Copia del SVG, que sigue haciendo falta para el `fetch` de apertura.js; que no se separen lo vigila la «j» de la sonda. */ :root { --marca-blanca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='70.00 69.99 948.42 113.03' width='948.42' height='113.03' role='img' aria-label='Aurora Boza'%3E%3Ctitle%3EAurora Boza%3C/title%3E%3Cg fill='%23000000' transform='translate(0 181.18)'%3E%3Cg class='a-logo__letra' data-letra='A'%3E%3Cpath d='M133.427734375 -20.068359375H144.4873046875L139.5068359375 -36.03515625H105.3759765625L100.3955078125 -20.068359375H112.1142578125V0.0H70.0V-20.068359375H78.2763671875L108.525390625 -111.03515625H137.8955078125L167.4853515625 -20.068359375H175.5419921875V0.0H133.427734375Z M111.162109375 -54.78515625H133.57421875L122.294921875 -90.8935546875Z'/%3E%3C/g%3E%3Cg class='a-logo__letra' data-letra='u'%3E%3Cpath d='M230.1806640625 -75.87890625H266.0693359375V-20.068359375H275.224609375V0.0H243.0712890625V-6.4453125Q239.189453125 -2.9296875 233.9892578125 -1.025390625Q228.7890625 0.87890625 221.9775390625 0.87890625Q215.6787109375 0.87890625 210.1123046875 -1.0986328125Q204.5458984375 -3.076171875 200.40771484375 -7.06787109375Q196.26953125 -11.0595703125 193.88916015625 -17.0654296875Q191.5087890625 -23.0712890625 191.5087890625 -31.201171875V-55.810546875H181.62109375V-75.87890625H215.166015625V-31.201171875Q215.166015625 -23.583984375 219.0478515625 -19.81201171875Q222.9296875 -16.0400390625 229.1552734375 -16.0400390625Q233.5498046875 -16.0400390625 237.138671875 -18.75Q240.7275390625 -21.4599609375 242.3388671875 -26.07421875V-55.810546875H230.1806640625Z'/%3E%3C/g%3E%3Cg class='a-logo__letra' data-letra='r'%3E%3Cpath d='M355.205078125 -48.2666015625H334.6240234375V-56.103515625Q331.62109375 -56.103515625 329.130859375 -55.70068359375Q326.640625 -55.2978515625 324.77294921875 -54.345703125Q322.9052734375 -53.3935546875 321.62353515625 -51.708984375Q320.341796875 -50.0244140625 319.8291015625 -47.5341796875V-20.068359375H335.283203125V0.0H285.771484375V-20.068359375H297.1240234375V-55.810546875H285.91796875V-75.87890625H319.6826171875V-70.5322265625Q322.9052734375 -73.095703125 326.93359375 -74.4873046875Q330.9619140625 -75.87890625 335.72265625 -75.87890625Q340.556640625 -75.87890625 345.68359375 -75.8056640625Q350.810546875 -75.732421875 355.205078125 -75.732421875Z'/%3E%3C/g%3E%3Cg class='a-logo__letra' data-letra='o'%3E%3Cpath d='M367.0703125 -38.232421875Q367.0703125 -46.5087890625 370.0732421875 -53.759765625Q373.076171875 -61.0107421875 378.4228515625 -66.4306640625Q383.76953125 -71.8505859375 391.1669921875 -75.0Q398.564453125 -78.1494140625 407.4267578125 -78.1494140625Q416.2890625 -78.1494140625 423.72314453125 -75.0Q431.1572265625 -71.8505859375 436.50390625 -66.4306640625Q441.8505859375 -61.0107421875 444.81689453125 -53.759765625Q447.783203125 -46.5087890625 447.783203125 -38.232421875Q447.783203125 -29.9560546875 444.89013671875 -22.66845703125Q441.9970703125 -15.380859375 436.68701171875 -9.92431640625Q431.376953125 -4.4677734375 423.94287109375 -1.318359375Q416.5087890625 1.8310546875 407.4267578125 1.8310546875Q398.271484375 1.8310546875 390.83740234375 -1.318359375Q383.4033203125 -4.4677734375 378.1298828125 -9.8876953125Q372.8564453125 -15.3076171875 369.96337890625 -22.59521484375Q367.0703125 -29.8828125 367.0703125 -38.232421875Z M388.9697265625 -38.232421875Q388.9697265625 -33.9111328125 390.4345703125 -30.28564453125Q391.8994140625 -26.66015625 394.42626953125 -24.0234375Q396.953125 -21.38671875 400.28564453125 -19.921875Q403.6181640625 -18.45703125 407.4267578125 -18.45703125Q411.30859375 -18.45703125 414.64111328125 -19.88525390625Q417.9736328125 -21.3134765625 420.42724609375 -23.9501953125Q422.880859375 -26.5869140625 424.2724609375 -30.21240234375Q425.6640625 -33.837890625 425.6640625 -38.232421875Q425.6640625 -42.7734375 424.2724609375 -46.435546875Q422.880859375 -50.09765625 420.42724609375 -52.6611328125Q417.9736328125 -55.224609375 414.64111328125 -56.57958984375Q411.30859375 -57.9345703125 407.4267578125 -57.861328125Q403.6181640625 -57.9345703125 400.28564453125 -56.57958984375Q396.953125 -55.224609375 394.42626953125 -52.6611328125Q391.8994140625 -50.09765625 390.4345703125 -46.435546875Q388.9697265625 -42.7734375 388.9697265625 -38.232421875Z'/%3E%3C/g%3E%3Cg class='a-logo__letra' data-letra='r'%3E%3Cpath d='M527.6904296875 -48.2666015625H507.109375V-56.103515625Q504.1064453125 -56.103515625 501.6162109375 -55.70068359375Q499.1259765625 -55.2978515625 497.25830078125 -54.345703125Q495.390625 -53.3935546875 494.10888671875 -51.708984375Q492.8271484375 -50.0244140625 492.314453125 -47.5341796875V-20.068359375H507.7685546875V0.0H458.2568359375V-20.068359375H469.609375V-55.810546875H458.4033203125V-75.87890625H492.16796875V-70.5322265625Q495.390625 -73.095703125 499.4189453125 -74.4873046875Q503.447265625 -75.87890625 508.2080078125 -75.87890625Q513.0419921875 -75.87890625 518.1689453125 -75.8056640625Q523.2958984375 -75.732421875 527.6904296875 -75.732421875Z'/%3E%3C/g%3E%3Cg class='a-logo__letra' data-letra='a'%3E%3Cpath d='M586.796875 -4.1015625Q584.2333984375 -2.490234375 582.109375 -1.35498046875Q579.9853515625 -0.2197265625 577.861328125 0.47607421875Q575.7373046875 1.171875 573.466796875 1.50146484375Q571.1962890625 1.8310546875 568.486328125 1.8310546875Q561.6748046875 1.8310546875 556.29150390625 -0.03662109375Q550.908203125 -1.904296875 547.20947265625 -5.16357421875Q543.5107421875 -8.4228515625 541.533203125 -12.85400390625Q539.5556640625 -17.28515625 539.5556640625 -22.4853515625Q539.5556640625 -27.7587890625 541.56982421875 -32.2265625Q543.583984375 -36.6943359375 547.392578125 -39.88037109375Q551.201171875 -43.06640625 556.73095703125 -44.86083984375Q562.2607421875 -46.6552734375 569.365234375 -46.6552734375Q574.5654296875 -46.6552734375 578.85009765625 -46.10595703125Q583.134765625 -45.556640625 586.796875 -44.7509765625V-47.0947265625Q586.796875 -49.951171875 585.6982421875 -52.03857421875Q584.599609375 -54.1259765625 582.6220703125 -55.48095703125Q580.64453125 -56.8359375 577.861328125 -57.45849609375Q575.078125 -58.0810546875 571.7822265625 -58.0810546875Q564.8974609375 -58.0810546875 559.66064453125 -56.72607421875Q554.423828125 -55.37109375 549.58984375 -52.8076171875L542.55859375 -67.0166015625Q550.029296875 -72.1435546875 558.19580078125 -74.853515625Q566.3623046875 -77.5634765625 575.517578125 -77.5634765625Q582.6220703125 -77.5634765625 588.66455078125 -75.98876953125Q594.70703125 -74.4140625 599.0283203125 -70.86181640625Q603.349609375 -67.3095703125 605.80322265625 -61.5966796875Q608.2568359375 -55.8837890625 608.2568359375 -47.6806640625V-20.068359375H618.4375V0.0H586.796875Z M570.09765625 -15.4541015625Q575.2978515625 -15.4541015625 579.5458984375 -17.138671875Q583.7939453125 -18.8232421875 586.796875 -21.240234375V-30.908203125H569.21875Q567.5341796875 -30.908203125 565.9228515625 -30.3955078125Q564.3115234375 -29.8828125 563.02978515625 -28.9306640625Q561.748046875 -27.978515625 560.97900390625 -26.5869140625Q560.2099609375 -25.1953125 560.2099609375 -23.3642578125Q560.2099609375 -19.9951171875 562.66357421875 -17.724609375Q565.1171875 -15.4541015625 570.09765625 -15.4541015625Z'/%3E%3C/g%3E%3Cg class='a-logo__letra' data-letra='B'%3E%3Cpath d='M666.337890625 -20.068359375H677.6904296875V-90.8935546875H666.337890625V-111.181640625L720.4638671875 -111.03515625Q728.0078125 -111.03515625 734.27001953125 -108.36181640625Q740.5322265625 -105.6884765625 745.0732421875 -101.11083984375Q749.6142578125 -96.533203125 752.14111328125 -90.41748046875Q754.66796875 -84.3017578125 754.66796875 -77.4169921875Q754.66796875 -69.3603515625 751.84814453125 -64.0869140625Q749.0283203125 -58.8134765625 743.828125 -55.5908203125Q749.3212890625 -52.0751953125 752.50732421875 -46.91162109375Q755.693359375 -41.748046875 755.693359375 -34.3505859375Q755.693359375 -26.806640625 753.09326171875 -20.5078125Q750.4931640625 -14.208984375 745.98876953125 -9.63134765625Q741.484375 -5.0537109375 735.33203125 -2.52685546875Q729.1796875 0.0 722.0751953125 0.0H666.337890625Z M702.0068359375 -90.8935546875V-65.9912109375H719.4384765625Q721.4892578125 -65.9912109375 723.3203125 -67.0166015625Q725.1513671875 -68.0419921875 726.50634765625 -69.76318359375Q727.861328125 -71.484375 728.6669921875 -73.64501953125Q729.47265625 -75.8056640625 729.47265625 -78.1494140625Q729.47265625 -80.419921875 728.6669921875 -82.6904296875Q727.861328125 -84.9609375 726.50634765625 -86.7919921875Q725.1513671875 -88.623046875 723.3203125 -89.75830078125Q721.4892578125 -90.8935546875 719.4384765625 -90.8935546875Z M702.0068359375 -45.9228515625V-20.068359375H720.4638671875Q722.587890625 -20.068359375 724.45556640625 -21.1669921875Q726.3232421875 -22.265625 727.67822265625 -24.06005859375Q729.033203125 -25.8544921875 729.8388671875 -28.23486328125Q730.64453125 -30.615234375 730.64453125 -33.1787109375Q730.64453125 -35.888671875 729.8388671875 -38.19580078125Q729.033203125 -40.5029296875 727.6416015625 -42.22412109375Q726.25 -43.9453125 724.38232421875 -44.93408203125Q722.5146484375 -45.9228515625 720.4638671875 -45.9228515625Z'/%3E%3C/g%3E%3Cg class='a-logo__letra' data-letra='o'%3E%3Cpath d='M764.8486328125 -38.232421875Q764.8486328125 -46.5087890625 767.8515625 -53.759765625Q770.8544921875 -61.0107421875 776.201171875 -66.4306640625Q781.5478515625 -71.8505859375 788.9453125 -75.0Q796.3427734375 -78.1494140625 805.205078125 -78.1494140625Q814.0673828125 -78.1494140625 821.50146484375 -75.0Q828.935546875 -71.8505859375 834.2822265625 -66.4306640625Q839.62890625 -61.0107421875 842.59521484375 -53.759765625Q845.5615234375 -46.5087890625 845.5615234375 -38.232421875Q845.5615234375 -29.9560546875 842.66845703125 -22.66845703125Q839.775390625 -15.380859375 834.46533203125 -9.92431640625Q829.1552734375 -4.4677734375 821.72119140625 -1.318359375Q814.287109375 1.8310546875 805.205078125 1.8310546875Q796.0498046875 1.8310546875 788.61572265625 -1.318359375Q781.181640625 -4.4677734375 775.908203125 -9.8876953125Q770.634765625 -15.3076171875 767.74169921875 -22.59521484375Q764.8486328125 -29.8828125 764.8486328125 -38.232421875Z M786.748046875 -38.232421875Q786.748046875 -33.9111328125 788.212890625 -30.28564453125Q789.677734375 -26.66015625 792.20458984375 -24.0234375Q794.7314453125 -21.38671875 798.06396484375 -19.921875Q801.396484375 -18.45703125 805.205078125 -18.45703125Q809.0869140625 -18.45703125 812.41943359375 -19.88525390625Q815.751953125 -21.3134765625 818.20556640625 -23.9501953125Q820.6591796875 -26.5869140625 822.05078125 -30.21240234375Q823.4423828125 -33.837890625 823.4423828125 -38.232421875Q823.4423828125 -42.7734375 822.05078125 -46.435546875Q820.6591796875 -50.09765625 818.20556640625 -52.6611328125Q815.751953125 -55.224609375 812.41943359375 -56.57958984375Q809.0869140625 -57.9345703125 805.205078125 -57.861328125Q801.396484375 -57.9345703125 798.06396484375 -56.57958984375Q794.7314453125 -55.224609375 792.20458984375 -52.6611328125Q789.677734375 -50.09765625 788.212890625 -46.435546875Q786.748046875 -42.7734375 786.748046875 -38.232421875Z'/%3E%3C/g%3E%3Cg class='a-logo__letra' data-letra='z'%3E%3Cpath d='M857.646484375 -12.01171875 889.0673828125 -56.396484375H874.345703125V-44.970703125H855.2294921875V-75.87890625H921.7333984375V-62.6953125L888.701171875 -19.62890625H905.546875V-34.2041015625H924.736328125V0.0H857.646484375Z'/%3E%3C/g%3E%3Cg class='a-logo__letra' data-letra='a'%3E%3Cpath d='M986.7724609375 -4.1015625Q984.208984375 -2.490234375 982.0849609375 -1.35498046875Q979.9609375 -0.2197265625 977.8369140625 0.47607421875Q975.712890625 1.171875 973.4423828125 1.50146484375Q971.171875 1.8310546875 968.4619140625 1.8310546875Q961.650390625 1.8310546875 956.26708984375 -0.03662109375Q950.8837890625 -1.904296875 947.18505859375 -5.16357421875Q943.486328125 -8.4228515625 941.5087890625 -12.85400390625Q939.53125 -17.28515625 939.53125 -22.4853515625Q939.53125 -27.7587890625 941.54541015625 -32.2265625Q943.5595703125 -36.6943359375 947.3681640625 -39.88037109375Q951.1767578125 -43.06640625 956.70654296875 -44.86083984375Q962.236328125 -46.6552734375 969.3408203125 -46.6552734375Q974.541015625 -46.6552734375 978.82568359375 -46.10595703125Q983.1103515625 -45.556640625 986.7724609375 -44.7509765625V-47.0947265625Q986.7724609375 -49.951171875 985.673828125 -52.03857421875Q984.5751953125 -54.1259765625 982.59765625 -55.48095703125Q980.6201171875 -56.8359375 977.8369140625 -57.45849609375Q975.0537109375 -58.0810546875 971.7578125 -58.0810546875Q964.873046875 -58.0810546875 959.63623046875 -56.72607421875Q954.3994140625 -55.37109375 949.5654296875 -52.8076171875L942.5341796875 -67.0166015625Q950.0048828125 -72.1435546875 958.17138671875 -74.853515625Q966.337890625 -77.5634765625 975.4931640625 -77.5634765625Q982.59765625 -77.5634765625 988.64013671875 -75.98876953125Q994.6826171875 -74.4140625 999.00390625 -70.86181640625Q1003.3251953125 -67.3095703125 1005.77880859375 -61.5966796875Q1008.232421875 -55.8837890625 1008.232421875 -47.6806640625V-20.068359375H1018.4130859375V0.0H986.7724609375Z M970.0732421875 -15.4541015625Q975.2734375 -15.4541015625 979.521484375 -17.138671875Q983.76953125 -18.8232421875 986.7724609375 -21.240234375V-30.908203125H969.1943359375Q967.509765625 -30.908203125 965.8984375 -30.3955078125Q964.287109375 -29.8828125 963.00537109375 -28.9306640625Q961.7236328125 -27.978515625 960.95458984375 -26.5869140625Q960.185546875 -25.1953125 960.185546875 -23.3642578125Q960.185546875 -19.9951171875 962.63916015625 -17.724609375Q965.0927734375 -15.4541015625 970.0732421875 -15.4541015625Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* --- El velo del primer fotograma: CSS puro, cubre antes de que movimiento.js (en el pie) pueda correr. Se retira solo con una animación; el JS solo gobierna su propio .a-velo, después. 160/220ms no son de tokens.css: cubren el hueco de 41-150ms medido en REVISION-MOVIMIENTO-2.md. */ /* El respaldo pinta LO QUE VIENE DETRÁS, no siempre lo mismo: papel si viene el preloader, negro con marca si viene una cortina. Pintando siempre negro, una recarga enseñaba cortina y DESPUÉS preloader [MEDIDO 06-09: 203 ms]. La clase la pone `aurora_entrada()` en la cabecera. */ body::before, html.aurora-entra-cubierto body::after { content: ''; position: fixed; inset: 0; pointer-events: none; animation: aurora-velo-inicial 220ms var(--curva-salida) 160ms forwards; } /* `--papel` y no `--blanco`: es el mismo token que pinta el panel del preloader, así que en una página oscura los dos van a la vez y el respaldo nunca desentona con lo que llega detrás. */ body::before { background: var(--papel); z-index: 9600; } html.aurora-entra-cubierto body::before { background: var(--negro); } html.aurora-entra-cubierto body::after { background: var(--blanco); -webkit-mask: var(--marca-blanca) center / auto var(--logo-alto) no-repeat; mask: var(--marca-blanca) center / auto var(--logo-alto) no-repeat; z-index: 9601; } /* Con cortina detrás, el respaldo NO se va por reloj: espera al velo de JS, que es quien lo apaga. Con el procesador a x6 el pie llega después de los 380 ms y la página asomaba ENTERA [MEDIDO 06-09: repunte del 99 %]. Los 3000 ms son el seguro, el mismo horizonte que el resto del proyecto. */ html.aurora-entra-cubierto body::before, html.aurora-entra-cubierto body::after { animation: aurora-velo-inicial 220ms var(--curva-salida) 3000ms forwards; } /* En cuanto existe el velo de JS el respaldo sobra: si siguiera desvaneciéndose por su cuenta, dejaría un logotipo fantasma quieto sobre la página mientras el velo bueno se va. */ html.aurora-velo-js body::before, html.aurora-velo-js body::after { display: none; } @keyframes aurora-velo-inicial { to { opacity: 0; visibility: hidden; } } /* --- Paso 1 · El revelado de obra: se dispara una vez y no se revierte --- */ .a-revelar-obra { clip-path: inset(100% 0 0 0); } .a-revelar-obra > img { transform: translateY(12%); } .a-revelar-obra.a-visible { clip-path: inset(0 0 0 0); transition: clip-path var(--ms-cine) var(--curva-salida); } .a-revelar-obra.a-visible > img { transform: none; transition: transform 1600ms var(--curva-salida); } /* --- Paso 2 · El revelado de texto: letra a letra, lo mueve SplitText desde movimiento.js --- */ /* Hueco para que la tinta no se recorte con interlínea <1: 21px de más en --t-display [MEDIDO en URBANOS]. */ .a-revelar-texto { --recorte: 0.24em; overflow: clip; padding-block: var(--recorte); margin-block: calc(var(--recorte) * -1); } /* El CSS solo recorta por renglón: es lo que hace que las letras suban desde debajo del suyo. `overflow-clip-margin` y no relleno: el relleno cambiaría el interlineado, y aquí es <1. */ .a-revelar-texto .linea { overflow: clip; overflow-clip-margin: var(--recorte); } /* El texto de la portada no tiene entrada (Andi, 07-09): solo el teñido por scroll. Cada frase, un renglón. */ .a-texto-revelado .a-revelar-texto > * { display: block; } /* Entrada de cartela: 200ms después de su obra. */ .a-revelar-cartela { opacity: 0; transform: translateY(8px); } .a-revelar-cartela.a-visible { opacity: 1; transform: translateY(0); transition: opacity var(--ms-normal) var(--curva-salida), transform var(--ms-normal) var(--curva-salida); transition-delay: 200ms; } .a-revelar-cartela.a-instantaneo.a-visible { transition-delay: 0ms; } /* Paralaje: la imagen mide 112% y la mueve el JS con getBoundingClientRect en cada fotograma, sin guardar ningún píxel. */ .a-paralaje { overflow: hidden; } .a-paralaje > img { width: 100%; height: 112%; object-fit: cover; } /* --- Paso 4 · El apilado: CSS puro, sobrevive a cualquier redimensionado --- */ .a-apilar > * { position: sticky; top: 0; min-height: 100svh; display: grid; place-items: center; } /* Ventanas bajas: una obra más su cartela no caben en 100svh. Se apaga el apilado. */ @media (max-height: 520px) { .a-apilar > * { position: static; min-height: 0; } } /* --- El enlace: subrayado que sale por la derecha y entra por la izquierda --- */ .a-enlace { position: relative; text-decoration: none; } .a-enlace::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.05em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--ms-normal) var(--curva-ambas); } /* Acotado a puntero fino: en táctil el `:hover` se queda pegado tras el toque y el subrayado no se iba [Andi, 05-09]. El foco de teclado sí lo dibuja, en cualquier dispositivo. */ @media (hover: hover) and (pointer: fine) { .a-enlace:hover::after { transform: scaleX(1); transform-origin: left; } } .a-enlace:focus-visible::after { transform: scaleX(1); transform-origin: left; } /* En tactil, ni al tocar: Chrome da `:focus-visible` tras un toque y el subrayado se quedaba dibujado (Andi, 05-09). Un dispositivo sin puntero fino tampoco navega con tabulador. */ @media (hover: none) { .a-enlace:focus-visible::after { transform: scaleX(0); } } /* --- Paso 4-bis · El cursor propio: solo con puntero fino, nunca en táctil --- */ /* 260ms y el rebote cubic-bezier(.34,1.56,.64,1) son del diseño §7, específicos del cursor: no hay token que los cubra. */ /* Viene en el HTML y lo enciende la clase que pone la cabecera, no el motor: encendido por el motor volvía tarde y el punto desaparecía en cada transición. El respaldo de la cabecera la retira si el motor no llega, y entonces vuelve el puntero del sistema. */ .a-cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--blanco); mix-blend-mode: difference; display: none; align-items: center; justify-content: center; pointer-events: none; /* Sobre el velo (9500), el respaldo (9601) y el preloader (9800): debajo se iba durante toda la cortina [MEDIDO 07-09: 64 de 64 fotogramas al cubrir y 75 al llegar]. En difference, blanco sobre negro. */ z-index: 9900; /* Grupo propio en la transición de vista del atrás/adelante: dentro del root viajaba con la página. */ view-transition-name: a-cursor; transform: translate3d(-100px, -100px, 0); transition: width 260ms cubic-bezier(.34, 1.56, .64, 1), height 260ms cubic-bezier(.34, 1.56, .64, 1), margin 260ms cubic-bezier(.34, 1.56, .64, 1), background 260ms cubic-bezier(.34, 1.56, .64, 1); } /* Encendido SOLO aquí: en el bloque de arriba subiría la especificidad y `--activo` y `--enlace` se quedarían sin efecto. */ html.aurora-cursor-oculto .a-cursor { display: flex; } .a-cursor__texto { opacity: 0; white-space: nowrap; transition: opacity 260ms cubic-bezier(.34, 1.56, .64, 1); } /* Sobre un enlace que no lleva cartel propio, el punto solo crece un poco (Andi): el MENU, los titulos de obra. Usa las mismas propiedades que `--activo`, que ya estan en su transicion. */ .a-cursor.a-cursor--enlace { width: 18px; height: 18px; margin: -9px 0 0 -9px; } .a-cursor.a-cursor--activo { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--papel); color: var(--tinta); mix-blend-mode: normal; /* sólido a propósito: en difference, un disco sobre un cuadro devuelve su negativo */ } .a-cursor--activo .a-cursor__texto { opacity: 1; font-family: var(--fuente-texto); font-weight: 500; font-size: var(--t-etiqueta); letter-spacing: 0.14em; text-transform: uppercase; } /* cursor: none en TODO lo de dentro, no solo en body: un enlace, [data-cursor] o img computan `pointer` de la hoja del navegador y ese valor gana al heredado [MEDIDO en REVISION-MOVIMIENTO-2.md, defecto 3]. Los campos de formulario se excluyen con más especificidad, no en cascada. */ /* La clase DOBLADA: el reset del tema padre pone `cursor: pointer` a todo `button:not(:disabled)` con la misma especificidad (0,1,1) y ganaba por orden de carga, así que sobre cualquier botón del sitio salían la mano y el punto a la vez [MEDIDO, INFORME-MENU-ESPACIOS.md §4]. */ body.a-cursor-listo.a-cursor-listo, body.a-cursor-listo.a-cursor-listo * { cursor: none; } /* La misma regla puesta desde el , para el hueco entre el primer pintado y el script. */ html.aurora-cursor-oculto.aurora-cursor-oculto, html.aurora-cursor-oculto.aurora-cursor-oculto * { cursor: none; } html.aurora-cursor-oculto.aurora-cursor-oculto input, html.aurora-cursor-oculto.aurora-cursor-oculto textarea, html.aurora-cursor-oculto.aurora-cursor-oculto select { cursor: text; } /* Doblada igual, o la excepción perdería contra la regla de arriba y los campos se quedarían sin su cursor de texto. */ body.a-cursor-listo.a-cursor-listo input, body.a-cursor-listo.a-cursor-listo textarea, body.a-cursor-listo.a-cursor-listo select { cursor: text; } /* Al navegar sin recargar, movimiento.js enfoca el contenido nuevo (lo que hace el navegador con un documento nuevo); el aro de foco alrededor de la página entera no aporta nada. */ main.a-contenido:focus { outline: none; } /* --- Paso 5 · El velo de transición: cubrir / mantener / descubrir --- */ /* El transform de aquí es el estado en reposo; el movimiento lo hace GSAP en línea, que manda sobre la clase. Sin GSAP el velo sigue cubriendo y destapándose por clase, solo que de golpe. */ .a-velo { position: fixed; inset: 0; background: var(--negro); transform: translateY(100%); z-index: 9500; pointer-events: none; /* Tapa la costura con el panel del menú, que viaja pegado a este borde [MEDIDO 06-09: 20/17/35 fotogramas con línea a 2560x1259, 2560x1440 y 1440x900; con 1 px, 0 en los tres]. Sombra y no `inset`: agrandar la caja alarga lo que recorre el `yPercent` y abre hueco. */ box-shadow: 0 -1px 0 var(--negro); } .a-velo.a-velo--cubierto { transform: translateY(0); pointer-events: auto; } /* Máscara y no imagen: el archivo es negro y aquí va blanco. Sin `opacity` colgando de `--cubierto` (Andi, 06-09): así se va CON la cortina; en reposo el velo ya está fuera de pantalla. Alto `--logo-alto`, el de la cabecera: los tres logotipos se mueven juntos. */ .a-velo::after { content: ''; position: absolute; inset: 0; background: var(--blanco); -webkit-mask: var(--marca-blanca) center / auto var(--logo-alto) no-repeat; mask: var(--marca-blanca) center / auto var(--logo-alto) no-repeat; } /* El seguro de los 3 s que despega una cortina pegada NO vive aquí: era una animación CSS, y su reloj no se detiene en la caché de retroceso. Está en `seguroVelo` de movimiento.js. */ /* Tramo de ENTRADA del atrás/adelante: sube el último fotograma de la página que se abandona, y la que llega —ya cubierta por el velo— entra por abajo pegada a él. Curva y duración atadas a las del velo [MEDIDO 06-09]: distintas, se abre una franja entre los dos. */ /* Quién se apunta y quién no lo decide movimiento.js, no un `@media` aquí: si los dos documentos de una travesía no coinciden, el navegador la aborta y deja una promesa sin dueño que ensucia la consola [MEDIDO 06-09 en la sonda táctil]. */ @view-transition { navigation: auto; } ::view-transition { background: var(--negro); } ::view-transition-group(root) { animation-duration: var(--ms-telon); } ::view-transition-image-pair(root) { isolation: auto; } ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; animation-duration: var(--ms-telon); animation-timing-function: var(--curva-ambas); animation-fill-mode: both; } ::view-transition-old(root) { animation-name: a-vista-sale; } ::view-transition-new(root) { animation-name: a-vista-entra; } @keyframes a-vista-sale { to { transform: translateY(-100%); } } @keyframes a-vista-entra { from { transform: translateY(100%); } } /* --- Texto que se tiñe con el scroll: de --tenue a --tinta, ligado y reversible --- */ /* El color lo lleva GSAP palabra a palabra (movimiento.js). Sin JavaScript, el texto se lee en negro directo: nunca se queda gris fijo. */ .a-texto-revelado { color: var(--tinta); } /* --- Paso 6 · Movimiento reducido: sin excepciones --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .a-revelar-obra { clip-path: none; } .a-revelar-obra > img { transform: none; } .a-apilar > * { position: static; min-height: 0; } .a-revelar-cartela { opacity: 1; transform: none; } .a-paralaje > img { transform: none !important; } .a-texto-revelado { animation: none; color: var(--tinta); } /* Doblada como arriba: sin la misma especificidad el respaldo de la cortina esperaría sus 3 s. */ body::before, body::after, html.aurora-entra-cubierto body::before, html.aurora-entra-cubierto body::after { animation-delay: 0s; } } /* `pathLength="1"` en cada trazo: el guión mide 1 y el desfase va de 1 (nada escrito) a 0 (entero). En reposo vale 0, así que sin GSAP la firma sale completa. */ .a-firma__trazo { stroke-dasharray: 1; }