/* ============================================================ 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. No will-change here — there can be 30+ [data-reveal] elements per page; promoting each to its own GPU layer permanently wastes memory. GSAP composites the transform+opacity transitions just fine without the hint. */ .js [data-reveal="fade-up"], .js [data-reveal=""], .js [data-reveal] { opacity: 0; transform: translateY(28px); } /* 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); } } /* ---------------------------------------------------------------- Low-perf tier — strips the most expensive GPU effects on weak devices and slow connections (set via data-perf="low" by an inline script in ). Everyone with a modern device sees the full high-fidelity version; only the constrained users get the lighter pass — no design quality sacrificed at the top end. ---------------------------------------------------------------- */ html[data-perf="low"] .site-header.is-visible { /* Drop backdrop-filter — replace with opaque dark fill */ backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 10, 10, 0.94); } html[data-perf="low"] .menu-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 10, 10, 0.98); } html[data-perf="low"] .hero-video { /* Single filter operation instead of three — much lighter to composite on weak GPUs. */ filter: brightness(1.4); } html[data-perf="low"] .hero__tagline { /* Single shadow layer instead of three — same readability, ~3x cheaper to paint. */ text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85); } html[data-perf="low"] .principle:hover { /* No translateY lift on hover — eliminates a layer promotion */ transform: none; } /* ---------------------------------------------------------------- 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; } } /* ---------------------------------------------------------------- Boot-failure fallback. The inline head script on every page adds html.js-failed if js/main.js has not executed within 6 seconds (old browser, corporate proxy stripping modules, MIME misconfig). Everything held at opacity 0 for the reveal choreography is force-shown so the site degrades to a readable static page. ---------------------------------------------------------------- */ html.js-failed [data-reveal], html.js-failed .is-pre-reveal .profile-content, html.js-failed .is-pre-reveal .profile-visual, html.js-failed .is-pre-reveal .desk-heading, html.js-failed .is-pre-reveal .desk-divider { opacity: 1 !important; transform: none !important; } html.js-failed .is-pre-reveal .desk-rule { transform: none !important; } html.js-failed body.is-locked { overflow: auto !important; height: auto !important; } html.js-failed .page-home .site-header .lang-toggle, html.js-failed .page-home .site-header .header-logo, html.js-failed .page-home .site-header .menu-toggle, html.js-failed .hero__tagline, html.js-failed .hero__cue { opacity: 1 !important; transform: none !important; }