/* ============================================================
   EPIK OCEAN — motion layer
   Spotlight · tilt · magnetic · parallax · velocity-skew ·
   ghost numerals · richer reveals
   ============================================================ */

/* ----- mouse spotlight (accent glow follows cursor) ----- */
.spot {
  position: fixed;
  left: 0; top: 0;
  width: 720px; height: 720px;
  margin: -360px 0 0 -360px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(var(--glow), .13), rgba(var(--glow), .045) 36%, transparent 62%);
  opacity: 0;
  transition: opacity .7s var(--ease);
  will-change: transform;
}
.spot.on { opacity: 1; }
@media (hover: none) { .spot { display: none; } }

/* ----- interaction hooks ----- */
[data-tilt]      { will-change: transform; transform-style: preserve-3d; }
[data-tilt] > *  { transform: translateZ(0); }
[data-magnetic]  { will-change: transform; }
[data-parallax]  { will-change: transform; }

/* ----- big ghost numerals (editorial depth) ----- */
.ghost {
  position: absolute;
  z-index: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(9rem, 30vw, 30rem);
  line-height: .74;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(237, 241, 247, .055);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.ghost--r { right: calc(-1 * var(--pad)); }
.ghost--l { left: calc(-1 * var(--pad)); }
.sec, .manifesto, .cta { position: relative; overflow: visible; }

/* ----- reveals: rise + fade (no blur — blur over a live canvas was the jank) ----- */
[data-reveal] {
  transition: opacity .9s var(--ease), transform 1.05s var(--ease);
}

/* ----- stack-card depth (JS-driven scale/opacity via vars) ----- */
.stack__card { transition: none; }

/* ----- canvas / card glow lift on hover ----- */
.canvas, .pcard, .caps__stage, .show__stage { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .spot, .ghost { display: none; }
}