/* ============================================================ Animations — keyframes + idle-state setup for JS-driven reveals. GSAP handles most timed animations imperatively; this file holds keyframes and pre-animation states. ============================================================ */ /* ---------------------------------------------------------------- Pre-animation states (set when .js class is present on ) GSAP / IntersectionObserver flips these to revealed. ---------------------------------------------------------------- */ /* Headline / paragraph fade-up */ .js [data-reveal="fade-up"], .js [data-reveal=""], .js [data-reveal] { opacity: 0; transform: translateY(28px); will-change: opacity, transform; } /* Side fade */ .js [data-reveal="fade-left"] { opacity: 0; transform: translateX(-28px); } .js [data-reveal="fade-right"] { opacity: 0; transform: translateX(28px); } /* Pure fade */ .js [data-reveal="fade"] { opacity: 0; transform: none; } /* Once revealed, GSAP sets these inline; clean state */ .js [data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; } /* Reduced motion — render final state immediately */ @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1 !important; transform: none !important; will-change: auto !important; } .hero__tagline { opacity: 1 !important; transform: none !important; } .hero__cue { opacity: 1 !important; } .hero-logo { opacity: 0 !important; } .page-home .site-header .lang-toggle, .page-home .site-header .header-logo, .page-home .site-header .menu-toggle { opacity: 1 !important; } .site-header { background: var(--color-overlay); backdrop-filter: blur(14px); } body.is-locked { overflow: auto !important; height: auto !important; } .hero-video.is-loaded { opacity: 1 !important; } } /* ---------------------------------------------------------------- Keyframes — used by CSS-only loops (scroll cue, etc.) Most timed motion lives in GSAP timelines. ---------------------------------------------------------------- */ @keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ---------------------------------------------------------------- Page transition — internal pages Light fade-in on first paint so the static header logo doesn't appear to "pop" before fonts load. ---------------------------------------------------------------- */ body:not(.page-home) { animation: pageEnter 600ms var(--ease-out) both; } @keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { body:not(.page-home) { animation: none; } }