/* ========================================================================== Animations — transform/opacity only, all guarded by prefers-reduced-motion ========================================================================== */ @keyframes menuIn { to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } } @keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @keyframes pulseRing{ 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(1.06); opacity: 0; } 100% { transform: scale(1.06); opacity: 0; } } @keyframes floatY { 0%,100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } } @keyframes caustic { 0% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(4%, -3%, 0) scale(1.12); } 66% { transform: translate3d(-3%, 3%, 0) scale(1.05); } 100% { transform: translate3d(0,0,0) scale(1); } } @keyframes waveShift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @keyframes scrollCue { 0% { transform: translateY(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(15px); opacity: 0; } } @keyframes wordReveal { to { transform: translateY(0); opacity: 1; } } /* -------------------------------------------------------------------------- Scroll-triggered entrances (JS adds .is-visible via IntersectionObserver) -------------------------------------------------------------------------- */ /* Scoped to .js (set by an inline script in ). Without JavaScript the class is never added, so content renders fully visible instead of stuck at opacity:0. */ .js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--t-enter) var(--ease-buoy), transform var(--t-enter) var(--ease-buoy); transition-delay: var(--reveal-delay, 0ms); will-change: transform, opacity; } .js [data-reveal="left"] { transform: translate3d(-34px, 0, 0); } .js [data-reveal="right"] { transform: translate3d(34px, 0, 0); } .js [data-reveal="scale"] { transform: scale(.94); } .js [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); will-change: auto; } /* -------------------------------------------------------------------------- Hero choreography -------------------------------------------------------------------------- */ .hero__word { display: inline-block; overflow: hidden; vertical-align: bottom; } .js .hero__word > span { display: inline-block; transform: translateY(105%); opacity: 0; animation: wordReveal 900ms var(--ease-buoy) forwards; animation-delay: calc(260ms + var(--i, 0) * 95ms); } .js .hero__stagger > * { opacity: 0; transform: translateY(22px); animation: menuIn 760ms var(--ease-buoy) forwards; animation-delay: calc(700ms + var(--i, 0) * 130ms); } /* Floating elements */ .float { animation: floatY 6.5s var(--ease-out) infinite; } .float--slow { animation-duration: 8.5s; } .float--delay { animation-delay: -3s; } /* Caustic light blobs */ .caustic { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; animation: caustic 26s ease-in-out infinite; will-change: transform; } .caustic--a { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; top: -14%; right: -10%; background: radial-gradient(circle, rgba(5,83,156,.10), transparent 70%); } .section--deep .caustic--a, .cta-band .caustic--a, .spotlight .caustic--a { background: radial-gradient(circle, rgba(5,83,156,.55), transparent 68%); } .section--deep .caustic--b, .cta-band .caustic--b, .spotlight .caustic--b { background: radial-gradient(circle, rgba(69,230,182,.22), transparent 68%); } .caustic--b { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; bottom: -16%; left: -8%; background: radial-gradient(circle, rgba(5,83,156,.08), transparent 70%); animation-duration: 32s; animation-direction: reverse; } /* Scroll cue */ .scroll-cue { position: absolute; left: 50%; bottom: var(--sp-6); transform: translateX(-50%); display: grid; place-items: center; gap: var(--sp-2); z-index: 3; } .scroll-cue__label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-mute); } .scroll-cue__track { position: relative; width: 24px; height: 38px; border: 1px solid var(--glass-edge); border-radius: var(--r-pill); overflow: hidden; } .scroll-cue__dot { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--marine-blue); animation: scrollCue 2.1s var(--ease-out) infinite; } /* Animated SVG line draw (process timeline) */ .draw-line { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset 2s var(--ease-out); } .draw-line.is-visible { stroke-dashoffset: 0; } /* 3D tilt */ .tilt { transform-style: preserve-3d; transition: transform 420ms var(--ease-buoy); will-change: transform; } .tilt__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient( 420px circle at var(--mx, 50%) var(--my, 50%), rgba(5,83,156,.10), transparent 45%); transition: opacity var(--t-hover) var(--ease-out); } .tilt:hover .tilt__glare { opacity: 1; } /* Magnetic button */ .magnetic { transition: transform 320ms var(--ease-buoy); will-change: transform; } /* Page transition wipe */ .page-wipe { position: fixed; inset: 0; z-index: var(--z-toast); pointer-events: none; background: linear-gradient(120deg, var(--marine-blue), var(--aqua-mint)); transform: scaleY(0); transform-origin: bottom; } .page-wipe.is-active { transform: scaleY(1); transform-origin: bottom; transition: transform 440ms var(--ease-buoy); } /* Parallax layers — JS writes --py */ .parallax { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; } /* Depth-of-field: distant layers recede */ .depth-far { filter: blur(var(--dof, 0px)) saturate(var(--dsat, 1)); transition: filter 200ms linear; } /* -------------------------------------------------------------------------- Reduced motion — collapse everything to instant, legible states -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } .js [data-reveal], .js [data-reveal].is-visible { opacity: 1 !important; transform: none !important; } .js .hero__word > span, .js .hero__stagger > * { opacity: 1 !important; transform: none !important; } .parallax { transform: none !important; } .float, .caustic, .marquee__track, .scroll-cue__dot, .mobile-actions__btn--wa::after { animation: none !important; } .depth-far { filter: none !important; } .draw-line { stroke-dashoffset: 0 !important; } .tilt { transform: none !important; } }