/* ========================================================================== Animations — reveal system, hero sequence, ambient loops Everything is visible by default. JS adds .js-motion to only when motion is allowed, and elements below the first viewport are then pre-hidden and revealed by IntersectionObserver. ========================================================================== */ /* ---------- Scroll reveals ---------- */ .js-motion [data-reveal].is-pending { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px); } .js-motion [data-reveal="scale"].is-pending { transform: scale(0.94); filter: blur(8px); } .js-motion [data-reveal].is-in { opacity: 1; transform: none; filter: none; transition: opacity var(--dur-long) var(--ease-out) var(--delay, 0ms), transform var(--dur-long) var(--ease-out) var(--delay, 0ms), filter var(--dur-long) var(--ease-out) var(--delay, 0ms); } /* Philosophy highlight sweep */ .js-motion .philosophy__text.is-pending .hl, .js-motion .philosophy__text:not(.is-in) .hl { --hl: 0%; } /* ---------- Hero load sequence ---------- */ .js-motion .hero__title .line__in { animation: line-up 1100ms var(--ease-out) both; } .js-motion .hero__title .line:nth-child(2) .line__in { animation-delay: 140ms; } .js-motion [data-hero-seq] { animation: fade-up 900ms var(--ease-out) both; } .js-motion .hero__copy > [data-hero-seq]:nth-child(1) { animation-delay: 0ms; } .js-motion .hero__copy > [data-hero-seq]:nth-child(3) { animation-delay: 380ms; } .js-motion .hero__copy > [data-hero-seq]:nth-child(4) { animation-delay: 500ms; } .js-motion .hero__copy > [data-hero-seq]:nth-child(5) { animation-delay: 620ms; } .js-motion .hero__compass[data-hero-seq] { animation: compass-in 1400ms var(--ease-out) 300ms both; } .js-motion .hero__img { animation: hero-zoom 2400ms var(--ease-out) both; } .js-motion .hero__scroll-line { animation: scroll-cue 2.4s var(--ease-in-out) infinite; } /* ---------- Map ---------- */ .js-motion .ksa-map.is-drawn .ksa-map__land { animation: draw-land 2200ms var(--ease-in-out) both; } .js-motion .map-pin__halo { animation: pin-pulse 2.8s var(--ease-out) infinite; } .js-motion .map-pin:nth-of-type(2n) .map-pin__halo { animation-delay: 900ms; } /* ---------- Partners marquee ---------- */ .js-motion .marquee__row { animation: marquee var(--marquee-dur, 60s) linear infinite; } .js-motion .marquee__row--rev { animation-direction: reverse; } .js-motion .marquee:hover .marquee__row { animation-play-state: paused; } /* ---------- Outcomes wheel slow orbit ---------- */ .js-motion .wheel__rim { animation: spin 80s linear infinite; transform-origin: 250px 250px; transform-box: view-box; } /* ---------- Keyframes ---------- */ @keyframes line-up { from { transform: translate3d(0, 105%, 0); } to { transform: none; } } @keyframes fade-up { from { opacity: 0; transform: translate3d(0, 20px, 0); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } @keyframes compass-in { from { opacity: 0; transform: rotate(-40deg) scale(0.9); } to { opacity: 1; transform: none; } } @keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } } @keyframes scroll-cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } @keyframes draw-land { from { stroke-dashoffset: var(--land-len, 0); fill-opacity: 0; } 60% { fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } } @keyframes pin-pulse { 0% { transform: scale(0.6); opacity: 0.5; } 100% { transform: scale(2.6); opacity: 0; } } @keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--marquee-shift, -50%), 0, 0); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes lightbox-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } } /* ---------- Reduced motion: calm, complete, still beautiful ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } .marquee__row { flex-wrap: wrap; width: auto; } .marquee { mask-image: none; -webkit-mask-image: none; } }