/* ═══════════════════════════════════════════════════════════════ INTRO DE PORTADA — cortina teja + chakana que se arma + llave Nada de este archivo actúa por su cuenta. Todo cuelga de dos clases que un script pone en : .pp-intro-corre → la capa está a la vista y las animaciones corren .pp-hero-espera → el hero queda retenido detrás de la cortina .pp-hero-entra → el hero entra (se cambia por la anterior) Si el script no corre —JavaScript apagado, sesión que ya vio la intro, movimiento reducido— ninguna clase aparece, la capa queda en display:none y el hero se ve como siempre. El estado normal del sitio es el sitio sin intro; esto se suma encima. ═══════════════════════════════════════════════════════════════ */ .pp-intro { /* Oculta por omisión A PROPÓSITO: es el seguro. Sin JavaScript nadie se queda con el telón trabado, porque nunca llega a mostrarse. */ display: none; } html.pp-intro-corre .pp-intro { display: grid; position: fixed; inset: 0; place-items: center; overflow: hidden; background: transparent; /* el color lo ponen las hojas */ /* Por encima de todo lo del tema: el máximo que usa style.css es 10000. */ z-index: 100000; /* El contenedor NO recibe clics; solo las hojas. Importa en el caso feo: si intro.js no llegara a cargarse, la capa seguiría acá con inset:0 y, siendo clicable, dejaría la página a la vista pero intocable. Así, apenas las hojas se corren fuera de la pantalla, no queda nada que intercepte. El clic para saltar funciona igual, porque desde las hojas burbujea hasta el contenedor. */ pointer-events: none; } /* ── Las dos hojas de la cortina ──────────────────────────────── */ .pp-intro-hoja { position: absolute; top: 0; height: 100%; width: 50.2%; /* 0.2% de solape: mata la línea clara del medio */ background: #9E2B2B; will-change: transform; /* pointer-events se hereda, así que esto lo reactiva solo para las hojas: son lo único que tapa y lo único que debe recibir el clic. La marca, ya desvanecida, no deja una zona muerta en el centro. */ pointer-events: auto; } .pp-intro-hoja-izq { left: 0; } .pp-intro-hoja-der { right: 0; } /* ── La marca ─────────────────────────────────────────────────── */ /* Los topes no son decoración: sin el de vh, en una pantalla baja (el LG a 1366x768) la marca se sale por arriba y por abajo. 62vh la deja siempre con aire. */ .pp-intro-marca { position: relative; width: min(460px, 78vw, 62vh); aspect-ratio: 1; will-change: transform, opacity; } .pp-intro-marca svg { width: 100%; height: 100%; display: block; overflow: visible; } /* Cada cuadrado crece desde su propio centro, no desde el del SVG. */ .pp-intro-marca rect { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.35); } /* La llave arranca en niebla y termina en teja. Durante el viaje, la niebla sobre el fondo teja se lee nítida (4,2:1); al encajar pasa a teja y queda como negativo dentro de la chakana hueso, que es la forma final del logo. */ .pp-intro-llave { transform-box: fill-box; transform-origin: center; opacity: 0; } .pp-intro-llave path { fill: #C3C4BF; } /* Capa aparte para la escala y la sombra. Si fueran a la misma capa que el desplazamiento, la llave se iría achicando durante TODO el viaje en vez de mantenerse elevada y bajar al final, que es lo que da la sensación de venir por encima de los cuadrados. */ .pp-intro-vuelo { transform-box: fill-box; transform-origin: center; } /* Aro que se abre y se apaga en el momento del encaje. */ .pp-intro-destello { position: absolute; inset: -12%; border-radius: 50%; border: 2px solid #F3F2EE; opacity: 0; pointer-events: none; } /* ═══ Reproducción ═════════════════════════════════════════════ Los tiempos son fracciones de --t, así cambiar la duración total no rompe el ritmo entre las partes. Con --t = 3,2 s queda: 0,16 – 1,82 s los 9 cuadrados van armando la chakana 0,64 – 2,30 s la llave viaja desde 340% atrás, elevada y con sombra 2,11 – 2,37 s la llave pasa de niebla a teja 2,30 s encaje y destello — el logo completo 2,56 s señal al hero, y la marca empieza a retirarse 2,62 – 3,46 s se abre la cortina, con el hero ya entrando debajo 3,46 s abierta del todo: recién ahí arranca el conteo de cifras 3,66 s se saca la capa del documento Los tres momentos que intro.js necesita saber están acá abajo como variables, no repetidos en el JavaScript. La versión corta los cambia y el reloj la sigue sin enterarse de que cambió nada. ══════════════════════════════════════════════════════════════ */ .pp-intro { --t: 3.2s; --viaje: 340%; /* desde qué tan atrás nace la llave */ --alto: 6; /* cuánto queda flotando: 0 apoyada · 10 en pleno vuelo */ --aviso: .80; /* fracción de --t en que se le avisa al hero */ --cortina: .82; /* ...en que las hojas empiezan a separarse */ --fin: 1.08; /* ...en que terminan de abrirse: .82 + .26 */ } html.pp-intro-corre .pp-intro rect { animation: pp-intro-cuadro calc(var(--t) * .18) cubic-bezier(.2,.9,.25,1) forwards; } html.pp-intro-corre .pp-intro-centro { animation-delay: calc(var(--t) * .05); } html.pp-intro-corre .pp-intro-brazo-1 { animation-delay: calc(var(--t) * .14); } html.pp-intro-corre .pp-intro-brazo-2 { animation-delay: calc(var(--t) * .17); } html.pp-intro-corre .pp-intro-brazo-3 { animation-delay: calc(var(--t) * .20); } html.pp-intro-corre .pp-intro-brazo-4 { animation-delay: calc(var(--t) * .23); } html.pp-intro-corre .pp-intro-esq-1 { animation-delay: calc(var(--t) * .30); } html.pp-intro-corre .pp-intro-esq-2 { animation-delay: calc(var(--t) * .33); } html.pp-intro-corre .pp-intro-esq-3 { animation-delay: calc(var(--t) * .36); } html.pp-intro-corre .pp-intro-esq-4 { animation-delay: calc(var(--t) * .39); } @keyframes pp-intro-cuadro { from { opacity: 0; transform: scale(.35); } 60% { opacity: 1; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } } /* La llave sale temprano y desde lejos: viaja MIENTRAS la chakana todavía se arma. Llega en .72 — el mismo instante del encaje, para que las dos cosas suenen como una sola. */ html.pp-intro-corre .pp-intro-llave { animation: pp-intro-llave calc(var(--t) * .52) cubic-bezier(.14,.72,.2,1) forwards; animation-delay: calc(var(--t) * .20); } @keyframes pp-intro-llave { from { opacity: 0; transform: translateX(var(--viaje)); } 22% { opacity: 1; } to { opacity: 1; transform: translateX(0); } } /* Viaja un 10% más grande y con sombra larga. En el último tramo baja, pero NO se apoya: frena a la altura de --alto y ahí queda, con algo de escala y algo de sombra. Los valores se mantienen planos hasta el 68% para que el descenso ocurra al final y no a lo largo del viaje. Ojo: en SVG las medidas del filtro van en unidades del viewBox (300), no en píxeles de pantalla. Por eso la sombra escala sola junto con el tamaño de la marca y no hay que retocarla por pantalla. */ html.pp-intro-corre .pp-intro-vuelo { animation: pp-intro-frena calc(var(--t) * .52) cubic-bezier(.3,.7,.3,1) forwards; animation-delay: calc(var(--t) * .20); } @keyframes pp-intro-frena { 0%, 68% { transform: scale(1.10); filter: drop-shadow(0 10px 12px rgba(28,28,28,.55)); } 100% { transform: scale(calc(1 + var(--alto) * .01)); filter: drop-shadow( 0 calc(var(--alto) * 1px) calc(var(--alto) * 1.5px) rgba(28,28,28, calc(var(--alto) * .09)) ); } } /* El paso de niebla a teja, justo antes de encajar. */ html.pp-intro-corre .pp-intro-llave path { animation: pp-intro-tinta calc(var(--t) * .08) ease-out forwards; animation-delay: calc(var(--t) * .66); } @keyframes pp-intro-tinta { to { fill: #9E2B2B; } } /* La marca lleva DOS animaciones en una sola declaración —el golpecito del encaje y después su salida— porque las dos actúan sobre el mismo elemento: en reglas sueltas la segunda le pisaría la primera. */ html.pp-intro-corre .pp-intro-marca { animation-name: pp-intro-encaje, pp-intro-marca-sale; animation-duration: calc(var(--t) * .12), calc(var(--t) * .18); animation-delay: calc(var(--t) * .72), calc(var(--t) * var(--aviso)); animation-timing-function: ease-out, ease-in; animation-fill-mode: forwards, forwards; } @keyframes pp-intro-encaje { 0% { transform: scale(1); } 45% { transform: scale(1.045); } 100% { transform: scale(1); } } @keyframes pp-intro-marca-sale { to { opacity: 0; transform: scale(.94); } } /* El destello vive dentro de la marca, así que su salida ya se la da la opacidad del padre: acá solo va el aro que se abre y se apaga. */ html.pp-intro-corre .pp-intro-destello { animation: pp-intro-destella calc(var(--t) * .26) ease-out forwards; animation-delay: calc(var(--t) * .72); } @keyframes pp-intro-destella { from { opacity: .55; transform: scale(.72); } to { opacity: 0; transform: scale(1.28); } } /* ── La cortina se abre ───────────────────────────────────────── */ html.pp-intro-corre .pp-intro-hoja-izq { animation: pp-intro-abre-izq calc(var(--t) * .26) cubic-bezier(.7,0,.3,1) forwards; animation-delay: calc(var(--t) * var(--cortina)); } html.pp-intro-corre .pp-intro-hoja-der { animation: pp-intro-abre-der calc(var(--t) * .26) cubic-bezier(.7,0,.3,1) forwards; animation-delay: calc(var(--t) * var(--cortina)); } @keyframes pp-intro-abre-izq { to { transform: translateX(-100%); } } @keyframes pp-intro-abre-der { to { transform: translateX(100%); } } /* Al saltarla con clic o Esc no se corta en seco: se apaga en 260 ms. */ html.pp-intro-corre .pp-intro.pp-intro-salta { animation: pp-intro-apaga .26s ease forwards; } @keyframes pp-intro-apaga { to { opacity: 0; } } /* ═══ Versión corta — la de la vuelta ══════════════════════════ La segunda vez en la misma pestaña la marca no se arma de nuevo: aparece ya completa y lo único que queda es la cortina que se abre. No es la misma intro acelerada. Comprimir 3,2 s en 0,9 s se vería apurado y encima ilegible. Es la MISMA imagen final —la que ya se vio armarse— sostenida un instante y despedida. Se saltea el armado, que ya no cuenta nada nuevo; se conserva el gesto de abrir, que es lo que engancha con la entrada del hero. Con --t = 0,9 s queda: 0 – 0,27 s la marca ya completa, quieta 0,27 s señal al hero, y la marca empieza a retirarse 0,29 – 0,52 s se abre la cortina 0,52 s abierta del todo: arranca el conteo de cifras 0,72 s se saca la capa del documento ══════════════════════════════════════════════════════════════ */ html.pp-intro-corta .pp-intro { --t: .9s; --aviso: .30; --cortina: .32; --fin: .58; /* .32 + .26, igual que arriba */ } /* Cada pieza que la versión completa anima queda acá congelada en su fotograma final. Es más simple que hacerle una animación propia y, sobre todo, no puede desincronizarse: es el mismo estado al que la otra llega. */ html.pp-intro-corta .pp-intro rect { opacity: 1; transform: none; animation: none; } html.pp-intro-corta .pp-intro-llave { opacity: 1; transform: none; animation: none; } html.pp-intro-corta .pp-intro-llave path { fill: #9E2B2B; /* ya entintada: el destino de pp-intro-tinta */ animation: none; } html.pp-intro-corta .pp-intro-vuelo { /* El reposo con el que la llave queda al final del vuelo: ni apoyada del todo ni en pleno viaje. Es el fotograma 100% de pp-intro-frena, con las mismas cuentas sobre --alto para que sigan juntos. */ transform: scale(calc(1 + var(--alto) * .01)); filter: drop-shadow( 0 calc(var(--alto) * 1px) calc(var(--alto) * 1.5px) rgba(28,28,28, calc(var(--alto) * .09)) ); animation: none; } /* El destello anuncia el instante del encaje, y acá no hay encaje. */ html.pp-intro-corta .pp-intro-destello { display: none; } /* Sin el golpecito del encaje, que tampoco ocurre: solo la retirada. */ html.pp-intro-corta .pp-intro-marca { animation-name: pp-intro-marca-sale; animation-duration: calc(var(--t) * .18); animation-delay: calc(var(--t) * var(--aviso)); animation-timing-function: ease-in; animation-fill-mode: forwards; } /* ═══ El hero, encadenado a la cortina ═════════════════════════ No van en fila sino solapados: el hero ya está entrando cuando las hojas empiezan a separarse, así se lee como una sola cosa que se abre y revela algo en movimiento, y no como dos animaciones pegadas. ══════════════════════════════════════════════════════════════ */ /* Retenido mientras la cortina tapa. Solo existe si el script lo pidió. */ html.pp-hero-espera .pp-hero-left > * { opacity: 0; } html.pp-hero-entra .pp-hero-left > * { animation: pp-hero-sube .62s cubic-bezier(.2,.75,.25,1) backwards; } /* backwards sostiene el fotograma inicial durante la espera, así el escalonado no produce parpadeos entre elemento y elemento. */ html.pp-hero-entra .pp-hero-left > *:nth-child(1) { animation-delay: 0s; } html.pp-hero-entra .pp-hero-left > *:nth-child(2) { animation-delay: .09s; } html.pp-hero-entra .pp-hero-left > *:nth-child(3) { animation-delay: .18s; } html.pp-hero-entra .pp-hero-left > *:nth-child(4) { animation-delay: .27s; } @keyframes pp-hero-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ── Quien pidió menos movimiento no ve nada de esto ─────────── El script ya se abstiene de arrancar la intro con prefers-reduced-motion; esto es el cinturón por si alguna clase quedara puesta igual. */ @media (prefers-reduced-motion: reduce) { html.pp-intro-corre .pp-intro { display: none; } html.pp-hero-espera .pp-hero-left > *, html.pp-hero-entra .pp-hero-left > * { opacity: 1; animation: none; } }