/* ============================================================================
   motion.css — The Golf Sock motion system (states + keyframes)
   ----------------------------------------------------------------------------
   Theme-agnostic. No brand colors. Uses currentColor / transparent so it
   layers cleanly over a separate store.css. Pairs with motion.js — the JS
   toggles classes/inline transforms; this file owns the initial hidden
   states and the keyframes.

   Easing tokens (spring-ish, high-end):
     --ease-out-expo : cubic-bezier(0.16, 1, 0.3, 1)     reveals, wipes
     --ease-spring   : cubic-bezier(0.34, 1.56, 0.64, 1)  overshoot pops
     --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1)     nav, hover
   ========================================================================== */

:root {
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  --reveal-dur: 640ms;
  --reveal-rise: 26px;
  --wipe-dur: 720ms;
  --stagger: 90ms;
}

/* ---------------------------------------------------------------------------
   1. SCROLL REVEAL — .reveal
   Hidden initial state; .is-visible (added by JS) animates to resting.
--------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-rise), 0);
  transition:
    opacity var(--reveal-dur) var(--ease-out-expo),
    transform var(--reveal-dur) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Directional variants (optional): add alongside .reveal */
.reveal.from-left  { transform: translate3d(calc(-1 * var(--reveal-rise)), 0, 0); }
.reveal.from-right { transform: translate3d(var(--reveal-rise), 0, 0); }
.reveal.from-scale { transform: scale(0.94); }
.reveal.from-left.is-visible,
.reveal.from-right.is-visible { transform: translate3d(0, 0, 0); }
.reveal.from-scale.is-visible { transform: scale(1); }

/* Stagger delay classes — used directly on elements, or applied by JS to
   children of a [data-reveal-group]. */
.reveal.d1 { --reveal-delay: calc(1 * var(--stagger)); }
.reveal.d2 { --reveal-delay: calc(2 * var(--stagger)); }
.reveal.d3 { --reveal-delay: calc(3 * var(--stagger)); }
.reveal.d4 { --reveal-delay: calc(4 * var(--stagger)); }

/* ---------------------------------------------------------------------------
   2. IMAGE REVEAL — [data-img-reveal]
   Clip-path wipe (bottom -> up) plus a subtle scale settle on the inner img.
--------------------------------------------------------------------------- */
[data-img-reveal] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--wipe-dur) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: clip-path;
}
[data-img-reveal].is-visible {
  clip-path: inset(0 0 0% 0);
}
/* Ken-burns-ish settle on the image inside the wipe frame */
[data-img-reveal] > img,
[data-img-reveal] > picture > img {
  transform: scale(1.08);
  transition: transform calc(var(--wipe-dur) + 400ms) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform;
}
[data-img-reveal].is-visible > img,
[data-img-reveal].is-visible > picture > img {
  transform: scale(1);
}

/* ---------------------------------------------------------------------------
   3. STICKY HEADER — .nav.scrolled
   JS adds .scrolled past 40px. Theme-agnostic elevation via currentColor.
--------------------------------------------------------------------------- */
.nav {
  transition:
    padding 420ms var(--ease-out-quint),
    box-shadow 420ms var(--ease-out-quint),
    backdrop-filter 420ms var(--ease-out-quint),
    background-color 420ms var(--ease-out-quint);
  will-change: padding, box-shadow;
}
.nav.scrolled {
  box-shadow: 0 1px 0 color-mix(in srgb, currentColor 8%, transparent),
              0 10px 30px -12px color-mix(in srgb, currentColor 22%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
}
/* Optional inner shrink: put .nav-inner on the row you want to compress. */
.nav.scrolled .nav-inner { transform: scale(0.97); }
.nav-inner { transition: transform 420ms var(--ease-out-quint); transform-origin: left center; }

/* ---------------------------------------------------------------------------
   4. MAGNETIC / HOVER-LIFT — .btn, [data-magnetic]
   JS sets --mx/--my translate on pointer move; CSS owns the lift + spring back.
--------------------------------------------------------------------------- */
.btn, [data-magnetic] {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 380ms var(--ease-spring), box-shadow 380ms var(--ease-out-quint);
  will-change: transform;
}
.btn.is-lift, [data-magnetic].is-lift {
  box-shadow: 0 14px 30px -14px color-mix(in srgb, currentColor 45%, transparent);
}
/* While actively dragging toward cursor, cut the transition for 1:1 feel. */
.btn.is-magnetic-active, [data-magnetic].is-magnetic-active {
  transition: box-shadow 380ms var(--ease-out-quint);
}

/* ---------------------------------------------------------------------------
   5. MARQUEE — .marquee-track
   JS duplicates children for a seamless loop and sets --marquee-dur.
--------------------------------------------------------------------------- */
.marquee { overflow: hidden; }
.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: marquee-scroll var(--marquee-dur, 30s) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------------------------------------------------------------------------
   6. TRACTION MAP — .traction / .zone / [data-zone]
   JS adds .on when it enters view (and staggers child [data-zone] via
   --zone-delay). CSS owns the grip-zone highlight keyframes.
--------------------------------------------------------------------------- */
.traction .zone,
.traction [data-zone] {
  opacity: 0.25;
  transform: scale(0.86);
  transform-origin: center;
  transition:
    opacity 520ms var(--ease-out-expo),
    transform 520ms var(--ease-spring);
  transition-delay: var(--zone-delay, 0ms);
}
.traction.on .zone,
.traction.on [data-zone] {
  opacity: 1;
  transform: scale(1);
  animation: zone-pulse 2600ms var(--ease-out-quint) var(--zone-delay, 0ms) infinite;
}
@keyframes zone-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent); }
  12%      { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 18%, transparent); }
  40%      { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent); }
}

/* ---------------------------------------------------------------------------
   7. COUNTERS & PARALLAX
   JS drives these entirely via textContent / inline transform. Only hint here.
--------------------------------------------------------------------------- */
[data-parallax] { will-change: transform; }
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   8. REDUCED MOTION — hard kill switch
   JS also short-circuits, but this guarantees content is visible even if JS
   fails to run. Everything resolves to its resting/visible state instantly.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.from-left,
  .reveal.from-right,
  .reveal.from-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-img-reveal] {
    clip-path: none !important;
    transition: none !important;
  }
  [data-img-reveal] > img,
  [data-img-reveal] > picture > img {
    transform: none !important;
    transition: none !important;
  }
  .btn, [data-magnetic] {
    transform: none !important;
    transition: none !important;
  }
  .marquee-track { animation: none !important; }
  .traction .zone,
  .traction [data-zone] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .nav, .nav-inner { transition: none !important; }
  html { scroll-behavior: auto !important; }
}