/* ==========================================================================
   Goretii Designs: MOTION ENGINE v2 (token-driven; see tokens.css section H)
   --------------------------------------------------------------------------
   Contract
   - Hidden "before" states apply ONLY under html.js (inline head script).
     Without JS every element renders in its final, visible state.
   - A 2.5s CSS failsafe reveals everything if main.js never runs.
   - Animate transform / opacity (clip-path for clip reveals + hero aperture).
   - Native scroll only (Lenis stays off).
   - prefers-reduced-motion: reduce => static and visible (LAST block).

   Markup API
     data-reveal        up (default) | down | left | right | fade | scale | zoom |
                        pop | mask | rule | rule-y | clip | clip-x
     data-reveal-group  parent: children get --i (0..8) => stagger
     data-delay="2"     extra delay in stagger steps (--d)
     data-split         heading words rise through masks
     data-hero / data-hero-word   hero timeline (starts at html.is-loaded)
     data-parallax="0.3"          desktop pointer parallax (main.js)
     .card--tilt                  desktop pointer tilt + shine (main.js)
     data-magnetic                desktop magnetic pull (main.js)
     data-cursor-label            custom cursor label (main.js)
   ========================================================================== */

/* ---------- Failsafe (if main.js never runs) ---------- */
@keyframes gd-failsafe { to { opacity: 1; transform: none; clip-path: none; } }
.js:not(.motion-ready) [data-reveal],
.js:not(.motion-ready) [data-reveal] > *,
.js:not(.motion-ready) .split-w__i,
.js:not(.motion-ready) [data-hero],
.js:not(.motion-ready) [data-hero-word] > span,
.js:not(.motion-ready) .hero .atmos,
.js:not(.motion-ready) .hero__rule,
.js:not(.motion-ready) .hero__art,
.js:not(.motion-ready) .hero .device-wrap,
.js:not(.motion-ready) .hero__badge { animation: gd-failsafe 0s linear 2.5s forwards; }

/* ---------- Scroll reveals ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition: opacity var(--dur-reveal) var(--ease-out-quart), transform var(--dur-reveal) var(--ease-reveal), clip-path var(--dur-reveal) var(--ease-reveal);
  transition-delay: calc((var(--i, 0) + var(--d, 0)) * var(--stagger));
}
.js [data-reveal="down"]  { transform: translate3d(0, calc(var(--reveal-distance) * -1), 0); }
.js [data-reveal="left"]  { transform: translate3d(calc(var(--reveal-distance) * -1.5), 0, 0); }
.js [data-reveal="right"] { transform: translate3d(calc(var(--reveal-distance) * 1.5), 0, 0); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="scale"] { transform: scale(var(--reveal-scale)); }
.js [data-reveal="zoom"]  { transform: scale(calc(2 - var(--reveal-scale))); }
.js [data-reveal="pop"]   { transform: scale(0.6); transition-timing-function: var(--ease-out-quart), var(--ease-spring); }
.js [data-reveal="rule"]  { opacity: 1; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-rule) var(--ease-reveal); transition-delay: calc((var(--i, 0) + var(--d, 0)) * var(--stagger)); }
.js [data-reveal="rule-y"]{ opacity: 1; transform: scaleY(0); transform-origin: center top; transition: transform calc(var(--dur-rule) * 1.2) var(--ease-reveal); }
.js [data-reveal="mask"]  { opacity: 1; transform: none; overflow: hidden; overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.js [data-reveal="mask"] > * { display: block; transform: translate3d(0, 105%, 0); transition: transform var(--dur-reveal) var(--ease-reveal); transition-delay: inherit; }
.js [data-reveal="clip"]  { opacity: 1; transform: scale(1.04); clip-path: inset(12% 6% 12% 6% round var(--radius-lg)); transition-duration: calc(var(--dur-reveal) * 1.3); }
.js [data-reveal="clip-x"]{ opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--ease-in-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="mask"].is-in > * { transform: none; }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round 0px); }
.js [data-reveal="clip-x"].is-in { clip-path: inset(0 0 0 0); }

/* Word-by-word headings */
.split-w { display: inline-block; overflow: hidden; overflow: clip; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; padding-inline-end: 0.04em; }
.split-w__i { display: inline-block; }
.js [data-split]:not(.is-in) .split-w__i { transform: translate3d(0, 110%, 0); }
.js [data-split] .split-w__i { transition: transform var(--dur-reveal) var(--ease-reveal); transition-delay: calc(var(--w, 0) * 45ms + var(--d, 0) * var(--stagger)); }
.js [data-split][data-reveal] { opacity: 1; transform: none; }

/* Child details inside revealed items */
.js [data-reveal] .check-icon path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--dur-slow) var(--ease-out-quart) calc(var(--i, 0) * var(--stagger) + 250ms); }
.js [data-reveal].is-in .check-icon path { stroke-dashoffset: 0; }
.js [data-reveal] .icon-chip, .js [data-reveal] .feature__ring { transform: scale(0.6); transition: transform var(--dur-slow) var(--ease-spring) calc(var(--i, 0) * var(--stagger) + 200ms); }
.js [data-reveal].is-in .icon-chip, .js [data-reveal].is-in .feature__ring { transform: none; }
.js .footer-giant[data-reveal] { transform: translate3d(0, 30%, 0); transition-duration: 1600ms; }
.js .footer-giant[data-reveal].is-in { transform: none; }

/* ---------- Hero timeline (starts when html.is-loaded) ---------- */
.js [data-hero] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity var(--dur-hero) var(--ease-out-quart), transform var(--dur-hero) var(--ease-out-expo); transition-delay: calc(var(--d, 0) * var(--stagger-hero) + 200ms); }
.js.is-loaded [data-hero] { opacity: 1; transform: none; }
[data-hero-word] { display: inline-block; overflow: hidden; overflow: clip; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
[data-hero-word] > span { display: inline-block; }
.js [data-hero-word] > span { transform: translate3d(0, 110%, 0); transition: transform var(--dur-hero) var(--ease-out-expo); transition-delay: calc(var(--w, 0) * var(--stagger-hero) + 160ms); }
.js.is-loaded [data-hero-word] > span { transform: none; }

.js .hero .atmos, .js .page-hero .atmos, .js .contact-hero .atmos { opacity: 0; transform: scale(1.06); transition: opacity 1600ms var(--ease-out-expo), transform 2000ms var(--ease-out-expo); }
.js.is-loaded .hero .atmos, .js.is-loaded .page-hero .atmos, .js.is-loaded .contact-hero .atmos { opacity: 1; transform: none; }
.js .hero__rule { transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-rule) var(--ease-reveal) 80ms; }
.js.is-loaded .hero__rule { transform: none; }
.js .hero__art { clip-path: inset(10% 10% 10% 10% round var(--radius-xl)); transform: scale(1.06); transition: clip-path 1400ms var(--ease-out-expo) 600ms, transform 1800ms var(--ease-out-expo) 600ms; }
.js.is-loaded .hero__art { clip-path: inset(0 0 0 0 round var(--radius-xl)); transform: none; }
.js .hero .device--browser { opacity: 0; transform: translate3d(0, 48px, 0) rotate(-2deg); transition: opacity var(--dur-reveal) var(--ease-out-quart) 900ms, transform var(--dur-hero) var(--ease-out-expo) 900ms; }
.js .hero .device--phone { opacity: 0; transform: translate3d(32px, 0, 0); transition: opacity var(--dur-reveal) var(--ease-out-quart) 1050ms, transform var(--dur-hero) var(--ease-out-expo) 1050ms; }
.js.is-loaded .hero .device--browser, .js.is-loaded .hero .device--phone { opacity: 1; transform: none; }
.js .hero__badge { opacity: 0; transform: scale(0.6); transition: opacity var(--dur-base) linear 1500ms, transform var(--dur-slow) var(--ease-spring) 1500ms; }
.js.is-loaded .hero__badge { opacity: 1; transform: none; }
.js.is-loaded .hero__cta::after { animation: gd-sheen var(--dur-sheen) var(--ease-out) 1800ms 1 both; }

/* Rotating word (JS adds the extra words; the static word is the fallback) */
.js .rotator__word { transition: transform 700ms var(--ease-out-expo), opacity 400ms var(--ease-out-quart); }
.js .rotator__word.is-leaving { visibility: visible; transform: translate3d(0, -110%, 0); opacity: 0; }
.js .rotator__word.is-entering { visibility: visible; animation: gd-word-in 700ms var(--ease-out-expo) both; }

/* ---------- Pointer parallax (JS writes --px/--py) ---------- */
[data-parallax] { translate: var(--px, 0px) var(--py, 0px); transition: translate 700ms var(--ease-out-quart); }

/* ---------- Ambient loops: desktop, motion allowed, paused offscreen ---------- */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .is-loaded .atmos__glow--a { animation: gd-drift-a 22s var(--ease-in-out) infinite alternate; }
  .is-loaded .atmos__glow--b { animation: gd-drift-b 28s var(--ease-in-out) infinite alternate; }
  .is-loaded .hero .device-wrap--browser .device { animation: gd-float var(--dur-float) var(--ease-in-out) 2400ms infinite alternate; }
  .is-loaded .hero .device-wrap--phone .device { animation: gd-float calc(var(--dur-float) * 0.8) var(--ease-in-out) 2600ms infinite alternate-reverse; }
  .is-loaded .hero .device--browser .device__screen picture { animation: gd-pan 14s var(--ease-in-out) 3s infinite alternate; transform-origin: 50% 0; }
  .aurora::before { animation: gd-spin 40s linear infinite; }
  .aurora::after { animation: gd-spin 56s linear infinite reverse; }
  .is-offscreen .atmos__glow, .is-offscreen .device, .is-offscreen .device__screen picture, .is-offscreen.cta-band .aurora::before, .is-offscreen.cta-band .aurora::after { animation-play-state: paused !important; }
  /* Marquee runs on desktop only */
  .marquee__track { animation: gd-marquee var(--dur-marquee) linear infinite; will-change: transform; }
  .marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee.is-paused .marquee__track, .marquee.is-offscreen .marquee__track { animation-play-state: paused; }
}
@media (max-width: 1023.98px) {
  .marquee__viewport { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .marquee__viewport::-webkit-scrollbar { display: none; }
  .marquee__list[aria-hidden="true"], .motion-btn { display: none; }
}

/* ---------- Process: fill + odometer numerals ---------- */
.process__fill { transform: scaleY(1); }
@media (min-width: 1024px) { .process__fill { transform: scaleX(1); } }
.js .process__fill { transform: scaleY(0); transition: transform 1600ms var(--ease-reveal) 200ms; }
.js .process.is-in .process__fill { transform: scaleY(1); }
@media (min-width: 1024px) { .js .process__fill { transform: scaleX(0); } .js .process.is-in .process__fill { transform: scaleX(1); } }
.js .step .odo__strip { transform: translate3d(0, 0, 0); transition: transform 1400ms var(--ease-out-expo) calc(var(--i, 0) * 180ms + 250ms); }
.js .step.is-in .odo__strip { transform: translate3d(0, calc(var(--n) * -10%), 0); }

/* ---------- Scroll-driven extras (CSS only, where supported) ---------- */
@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .scroll-progress { display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gradient-sky); transform-origin: 0 50%; animation: gd-progress linear both; animation-timeline: scroll(root block); }
    .included__bg picture { animation: gd-parallax linear both; animation-timeline: view(); animation-range: cover; }
    .page-hero__ghost { animation: gd-ghost linear both; animation-timeline: scroll(root block); animation-range: 0 80vh; }
  }
}

/* ---------- Page transitions ---------- */
/* Cross-document View Transitions: browsers without support ignore these rules. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: gd-vt-out 260ms var(--ease-in) both; }
  ::view-transition-new(root) { animation: gd-vt-in 560ms var(--ease-out-expo) 80ms both; }
}
/* Fallback wipe (main.js uses it only when View Transitions are unsupported) */
.page-wipe, .page-wipe__line { position: fixed; inset: 0; z-index: 2000; pointer-events: none; transform: scaleY(0); }
.page-wipe { background: var(--navy-950); transform-origin: 50% 100%; }
.page-wipe__line { inset: auto 0 0 0; height: 1px; background: var(--hairline-gold); transform: scaleX(0); transform-origin: 0 50%; }
.is-leaving .page-wipe { transform: scaleY(1); transition: transform 420ms var(--ease-in-out); }
.is-leaving .page-wipe__line { transform: scaleX(1); transition: transform 360ms var(--ease-out); }
.is-entering .page-wipe { transform: scaleY(1); transform-origin: 50% 0; }
.is-entering.is-entered .page-wipe { transform: scaleY(0); transition: transform 560ms var(--ease-out-expo) 60ms; }

/* ---------- Mobile menu stagger ---------- */
.js .mobile-menu__list li, .js .mobile-menu__actions > * {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 300ms var(--ease-out-quart), transform 400ms var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 40ms + 80ms);
}
.js .mobile-menu.is-open .mobile-menu__list li, .js .mobile-menu.is-open .mobile-menu__actions > * { opacity: 1; transform: none; }

/* ---------- Custom cursor (fine pointers, JS-created) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) linear; will-change: transform; mix-blend-mode: difference; }
.cursor.is-visible { opacity: 1; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast) linear, width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out); }
.cursor__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; }
.cursor__ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid #fff; opacity: 0; transform: scale(0.3); }
.cursor__label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(0.6); padding: 10px 16px; border-radius: var(--radius-pill); background: #fff; color: #000; font: var(--fw-semibold) 0.75rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity var(--dur-fast) linear, transform var(--dur-base) var(--ease-spring); }
.cursor.is-link .cursor__dot { transform: scale(0); }
.cursor.is-link .cursor__ring { opacity: 1; transform: scale(1); }
.cursor.is-label .cursor__dot, .cursor.is-label .cursor__ring { opacity: 0; }
.cursor.is-label .cursor__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor.is-hidden-target { opacity: 0; }

/* ---------- Keyframes ---------- */
@keyframes gd-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes gd-float { to { transform: translate3d(0, calc(var(--float-distance) * -1), 0); } }
@keyframes gd-drift-a { to { transform: translate3d(-6vmax, 4vmax, 0) scale(1.08); } }
@keyframes gd-drift-b { to { transform: translate3d(5vmax, -3vmax, 0) scale(0.94); } }
@keyframes gd-pan { to { transform: scale(1.06) translate3d(0, -2%, 0); } }
@keyframes gd-sheen { from { transform: translate3d(-120%, 0, 0); } to { transform: translate3d(120%, 0, 0); } }
@keyframes gd-word-in { from { transform: translate3d(0, 110%, 0); opacity: 0; } }
@keyframes gd-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gd-parallax { from { transform: translate3d(0, -6%, 0) scale(1.12); } to { transform: translate3d(0, 6%, 0) scale(1.12); } }
@keyframes gd-ghost { to { transform: translate3d(-8%, 0, 0); opacity: 0.2; } }
@keyframes gd-vt-out { to { opacity: 0; transform: translate3d(0, -16px, 0); } }
@keyframes gd-vt-in { from { opacity: 0; transform: translate3d(0, 32px, 0); } }
@keyframes gd-spin { to { transform: rotate(360deg); } }
@keyframes gd-fade { from { opacity: 0; } }
@keyframes gd-fade-up { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
@keyframes gd-draw { to { stroke-dashoffset: 0; } }
.success-check circle { stroke-dasharray: 190; stroke-dashoffset: 190; animation: gd-draw 700ms var(--ease-out-quart) forwards; }
.success-check path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: gd-draw 450ms var(--ease-out-quart) 500ms forwards; }

/* ==========================================================================
   Reduced motion: complete fallback (keep LAST)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
    transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
  .js [data-reveal], .js [data-reveal] > *, .js .split-w__i, .js [data-hero], .js [data-hero-word] > span,
  .js .hero .atmos, .js .page-hero .atmos, .js .contact-hero .atmos, .js .hero__rule, .js .hero__art, .js .hero .device--browser, .js .hero .device--phone, .js .hero__badge,
  .js .process__fill, .js [data-reveal] .icon-chip, .js [data-reveal] .feature__ring, .js .mobile-menu__list li, .js .mobile-menu__actions > *, .js .footer-giant[data-reveal] {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .js .step .odo__strip { transform: translate3d(0, calc(var(--n) * -10%), 0) !important; }
  .js [data-reveal] .check-icon path, .success-check circle, .success-check path { stroke-dashoffset: 0 !important; }
  [data-parallax] { translate: none !important; }
  .marquee__viewport, .motion-btn { display: none !important; }
  .marquee__static { display: block !important; }
  .scroll-progress, .page-wipe, .page-wipe__line, .cursor, .atmos__pointer { display: none !important; }
  .atmos__glow, .device, .device__screen picture, .aurora::before, .aurora::after, .included__bg picture, .page-hero__ghost, .hero__cta::after { animation: none !important; }
  .btn { --mx: 0px !important; --my: 0px !important; --press: 1 !important; }
  .card--tilt { transform: none !important; }
  .site-header.is-hidden { transform: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* JS-mirrored class (set when the OS setting changes live) */
.reduce-motion .marquee__viewport, .reduce-motion .motion-btn { display: none !important; }
.reduce-motion .marquee__static { display: block !important; }