/* ========================================================================== Reveal-on-scroll states — toggled by IntersectionObserver in animations.js. [data-reveal] elements are fully visible by default (no-JS / JS-failure fallback). Only once animations.js confirms it's running does it add .js-reveal-ready to , which is what actually hides elements before they scroll into view. ========================================================================== */ [data-reveal] { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .js-reveal-ready [data-reveal] { opacity: 0; transform: translateY(28px); } .js-reveal-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal-group] > * { transition-delay: calc(var(--reveal-index, 0) * 90ms); } @media (prefers-reduced-motion: reduce) { .js-reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================================== Hero intro sequence — short, skippable, never blocking. ========================================================================== */ .intro-veil { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--c-near-black); display: grid; place-items: center; transition: opacity 380ms var(--ease-out), visibility 380ms; } .intro-veil img { width: 88px; height: 88px; border-radius: 50%; opacity: 0; animation: intro-logo 900ms var(--ease-out) forwards 120ms; } .intro-veil.is-done { opacity: 0; visibility: hidden; pointer-events: none; } @keyframes intro-logo { from { opacity: 0; transform: scale(.85); filter: brightness(.6); } to { opacity: 1; transform: scale(1); filter: brightness(1); } } @media (prefers-reduced-motion: reduce) { .intro-veil { display: none; } } /* ========================================================================== Hero text stagger ========================================================================== */ .hero-content .eyebrow, .hero-content h1, .hero-content .lead, .hero-content .hero-actions, .hero-content .hero-values { opacity: 0; transform: translateY(18px); animation: hero-in 700ms var(--ease-out) forwards; } .hero-content .eyebrow { animation-delay: 120ms; } .hero-content h1 { animation-delay: 220ms; } .hero-content .lead { animation-delay: 340ms; } .hero-content .hero-actions { animation-delay: 440ms; } .hero-content .hero-values { animation-delay: 540ms; } @keyframes hero-in { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero-content .eyebrow, .hero-content h1, .hero-content .lead, .hero-content .hero-actions, .hero-content .hero-values { animation: none; opacity: 1; transform: none; } } /* ========================================================================== Water ring decoration (hero) — pure CSS, cheap, paused off-screen via JS ========================================================================== */ .water-ring { position: absolute; border: 1px solid rgba(10,102,255,.35); border-radius: 50%; animation: ring-out 4.5s var(--ease-in-out) infinite; } @keyframes ring-out { 0% { transform: scale(.4); opacity: 0; } 40% { opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .water-ring { animation: none; display: none; } } /* ========================================================================== Gloss sweep on primary buttons (desktop only — see responsive.css) ========================================================================== */ .btn--primary { position: relative; overflow: hidden; } .btn--primary::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left 550ms var(--ease-out); } .btn--primary:hover::before { left: 130%; } /* ========================================================================== Magnetic buttons — JS sets --mx/--my; harmless no-op without JS ========================================================================== */ .btn--magnetic { transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px)); } /* ========================================================================== Scroll-drawn step line handled via inline height % from JS (.step-line-fill) No keyframes needed — it's driven by scroll position, not a timer. ========================================================================== */