/* ============ Animation utilities ============ * All initial "hidden" states are gated on html.js-enabled so that * if JS fails to load the content stays visible. The .js-enabled class * is added inline in before CSS loads — see index.html. */ /* Legacy CSS reveal (IntersectionObserver fallback) --------------- */ html.js-enabled .reveal { opacity: 0; transform: translateY(50px); transition: opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1); } html.js-enabled .reveal.is-visible { opacity: 1; transform: none; } /* Headlines that will be SplitType'd need visibility:hidden so their * raw text doesn't flash before gsap wires up the chars. The helper * flips visibility back to visible after splitting. */ html.js-enabled .hero__wordmark, html.js-enabled .manifesto__text, html.js-enabled .ebebe__big, html.js-enabled .pract h2, html.js-enabled .emotion h2, html.js-enabled .services h2, html.js-enabled .results h2, html.js-enabled .contact h2 { visibility: hidden; } /* When JS is enabled, GSAP drives marquees (inline transforms). * Kill the CSS keyframe animation so it doesn't fight. */ html.js-enabled .marquee__track { animation: none !important; } /* Performance hints ---------------------------------------------- */ .marquee__track { will-change: transform; } .case, .service, .hero__photo, .ebebe__poster { will-change: transform, opacity; } /* Reduced motion -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.js-enabled .reveal, html.js-enabled .hero__wordmark, html.js-enabled .manifesto__text, html.js-enabled .ebebe__big, html.js-enabled .pract h2, html.js-enabled .emotion h2, html.js-enabled .services h2, html.js-enabled .results h2, html.js-enabled .contact h2 { opacity: 1 !important; transform: none !important; visibility: visible !important; transition: none !important; } .marquee__track { animation: none !important; transform: none !important; } }