/* ================================================================== ENTRADA — que cada sección aparezca cuando uno llega a ella. Cómo funciona, para el que venga después: Todo esto vive detrás de la clase .cf, que un script chiquito en el le pone al SOLO si (a) el navegador tiene IntersectionObserver y (b) el usuario no pidió menos animación. Si entrada.js no arranca en 2.6 segundos, ese mismo script le quita la clase y la página queda visible como si nada. O sea: sin JS, con JS roto, o con "reduce motion" prendido, no se esconde nada. Nunca. Eso es a propósito. En julio se metió un parche en enhance.css que obliga a todo .reveal a quedar visible porque el sistema viejo dejaba secciones enteras invisibles cuando GSAP se caía. Ese parche sigue ahí y sigue mandando. Por eso acá se usa !important y selectores más específicos: no para pelear con él, sino para poder animar sin quitarle la red de seguridad a nadie. Los pares van juntos a propósito: primero el estado escondido, y justo debajo el mismo selector con .cf-in, que es lo que agrega entrada.js cuando el bloque entra en pantalla. Si alguien toca un selector de arriba, tiene que tocar el de abajo también. ================================================================== */ /* --- 1. escondido: bloques de la portada --------------------------- Las secciones de la portada se parten en sus hijos directos (el h2 entra, y detrás la parrilla), menos tres: .hero-sec — el hero ya tiene su propia entrada, no se toca .ls-fullbleed — sus hijos son capas (imagen, velo, texto): se animan como un solo bloque o se ve descuadrado .lq-hook — no tiene hijos, la sección es el bloque ------------------------------------------------------------------ */ html.cf main > section:not(.hero-sec):not(.ls-fullbleed):not(.lq-hook) > *, html.cf main > section.ls-fullbleed, html.cf main > section.lq-hook, /* --- y los bloques de las páginas de adentro ---------------------- */ html.cf .page .narrow > *{ opacity:0 !important; transform:translate3d(0,26px,0) !important; transition:opacity .78s cubic-bezier(.22,.61,.36,1), transform .78s cubic-bezier(.22,.61,.36,1); } /* --- 2. adentro: lo mismo, ya en pantalla -------------------------- */ html.cf main > section:not(.hero-sec):not(.ls-fullbleed):not(.lq-hook) > *.cf-in, html.cf main > section.ls-fullbleed.cf-in, html.cf main > section.lq-hook.cf-in, html.cf .page .narrow > *.cf-in{ opacity:1 !important; transform:none !important; } /* --- 3. el h1 y la miga de pan entran más cortito ------------------ Están arriba del todo, se ven apenas carga: un salto de 26px ahí se siente como un tirón. 12px basta. */ html.cf .page .narrow > h1, html.cf .page .narrow > .ls-crumb, html.cf .page .narrow > .ls-byline, html.cf .page .narrow > .ls-updated{ transform:translate3d(0,12px,0) !important; } /* ...y su llegada. Va aparte porque los selectores de arriba pesan lo mismo que el .cf-in general y, al ir después, le ganaban: la miga de pan y la firma se quedaban trabadas 12px abajo para siempre. */ html.cf .page .narrow > h1.cf-in, html.cf .page .narrow > .ls-crumb.cf-in, html.cf .page .narrow > .ls-byline.cf-in, html.cf .page .narrow > .ls-updated.cf-in{ transform:none !important; } /* --- 4. las capas de adentro del full-bleed no se mueven solas ----- La sección entera ya se está moviendo; si los hijos también, la imagen se despega del texto. */ html.cf main > section.ls-fullbleed > *{ opacity:1 !important; transform:none !important; } /* --- 5. nadie se queda escondido si pidió menos movimiento --------- */ @media (prefers-reduced-motion:reduce){ html.cf main > section > *, html.cf main > section, html.cf .page .narrow > *{ opacity:1 !important; transform:none !important; transition:none !important; } }