/* ════════════════════════════════════════════════════════════
   APEX MOTION KIT — PHASE 2 · v1.0
   Framer Motion vocabulary, ported to vanilla.
   All patterns opt-in via data-* attributes. Zero global pollution.
   ════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────
   1. MAGNETIC CTA (data-apex-magnetic)
   The element gains a transform set inline by JS.
   This rule just primes the easing.
   ──────────────────────────────────────────────── */
[data-apex-magnetic] {
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
[data-apex-magnetic]:active {
  transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  [data-apex-magnetic] { transform: none !important; }
}

/* ────────────────────────────────────────────────
   2. SCROLL-LINKED PARALLAX (data-apex-parallax)
   JS sets --apex-parallax-y based on scroll progress.
   ──────────────────────────────────────────────── */
[data-apex-parallax] {
  transform: translate3d(0, var(--apex-parallax-y, 0), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  [data-apex-parallax] { transform: none !important; }
}

/* ────────────────────────────────────────────────
   3. MARQUEE HOVER-PAUSE + EDGE FADE (.apex-marquee)
   Mask gradient creates a soft fade at left/right edges.
   ──────────────────────────────────────────────── */
.apex-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}
.apex-marquee-track {
  display: inline-flex;
  gap: 24px;
  white-space: nowrap;
  animation: apex-marquee-scroll var(--apex-marquee-duration, 32s) linear infinite;
}
.apex-marquee:hover .apex-marquee-track,
.apex-marquee:focus-within .apex-marquee-track {
  animation-play-state: paused;
}
@keyframes apex-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .apex-marquee-track { animation-play-state: paused; }
}

/* Add hover-pause + edge fade to the existing .band-marquee on the site */
.band-marquee {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 5%,
    #000 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 5%,
    #000 95%,
    transparent 100%
  );
}
@media (hover: hover) {
  .band-marquee:hover .marquee-track {
    animation-play-state: paused;
  }
}

/* ────────────────────────────────────────────────
   4. ODOMETER FLIP COUNTER (data-apex-flip)
   Adds split-flap visual to .kpi-num + .nexus-stat-val
   when JS upgrades them. Each digit becomes its own
   rolling cell.
   ──────────────────────────────────────────────── */
.apex-flip {
  display: inline-flex;
  gap: 1px;
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
  line-height: 1;
}
.apex-flip-cell {
  display: inline-block;
  position: relative;
  height: 1em;
  width: 0.62em;
  overflow: hidden;
  vertical-align: baseline;
}
.apex-flip-cell.is-static {
  width: auto;
  overflow: visible;
}
.apex-flip-cell .apex-flip-roll {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate3d(0, 0, 0);
  transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.apex-flip-cell .apex-flip-roll > span {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .apex-flip-cell .apex-flip-roll { transition: none; }
}

/* ────────────────────────────────────────────────
   5. CURSOR GHOST (optional, opt-in via data-apex-cursor on body)
   24px cyan ring that lerps to cursor; lifts to 1.5x on .magnetic.
   Hidden on touch devices.
   ──────────────────────────────────────────────── */
.apex-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(0, 240, 255, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: screen;
  transform: translate3d(-50%, -50%, 0);
  transition:
    width 180ms cubic-bezier(0.4, 0, 0.2, 1),
    height 180ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
    background 180ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}
.apex-cursor.is-active { opacity: 1; }
.apex-cursor.is-hover {
  width: 36px; height: 36px;
  background: rgba(0, 240, 255, 0.06);
}
.apex-cursor.is-down {
  width: 18px; height: 18px;
  background: rgba(236, 72, 153, 0.18);
  border-color: rgba(236, 72, 153, 0.6);
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .apex-cursor { display: none !important; }
}