/* ========================================================================== 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; /* CSS fallback: never stay on screen if JS is slow or fails (common on mobile). */ pointer-events: none; animation: intro-veil-out 360ms var(--ease-out) 900ms forwards; } .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; animation: none; } @keyframes intro-veil-out { to { opacity: 0; visibility: hidden; } } @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 (hover: none) { .hero-content .eyebrow, .hero-content h1, .hero-content .lead, .hero-content .hero-actions, .hero-content .hero-values { animation: none; opacity: 1; transform: none; } } @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. ========================================================================== */ /* ========================================================================== FAQ items — staggered entrance once the list reveals. Opacity only: fill-mode must NOT lock transform, or the open “pop” animation can never win against this rule’s higher specificity. ========================================================================== */ .js-reveal-ready .faq-list.is-visible .faq-item:not([open]) { animation: faq-rise 620ms var(--ease-out) both; animation-delay: calc(var(--faq-i, 0) * 70ms); } @keyframes faq-rise { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .js-reveal-ready .faq-list.is-visible .faq-item:not([open]) { animation: none; } } /* Soft pulse on a chosen word in the hero title */ .title-pulse { --pulse-duration: 4s; --pulse-scale: 1.03; --pulse-glow: 12px; display: inline-block; color: var(--accent, #6eb0ff); transform-origin: center; animation: title-word-pulse var(--pulse-duration) ease-in-out infinite; will-change: transform, opacity, text-shadow; } @keyframes title-word-pulse { 0%, 100% { opacity: 1; transform: scale(1); text-shadow: 0 0 0 transparent; } 50% { opacity: 0.88; transform: scale(var(--pulse-scale)); text-shadow: 0 0 var(--pulse-glow) rgba(110, 176, 255, 0.4); } } @media (prefers-reduced-motion: reduce) { .title-pulse { animation: none; text-shadow: none; } }