/* ═══════════════════════════════════════════════════════════
   FitJeton — v4 enhancement layer (scoped to body.v4)
   Same structure / copy / palette / type / spacing as v3.
   Adds: the Ring as a recurring signature (oversized, scroll-
   drawn arcs), the Token as a physical object (sheen, weight,
   narrative closure at the CTA), product presence, and quiet
   scroll depth. Motion is felt, not noticed.
   ═══════════════════════════════════════════════════════════ */

/* ───── Ring signature ─────
   Oversized cropped arcs. Track barely-there, arc scroll-drawn
   by v4.js (data-draw). */
body.v4 .dl { position: relative; }
body.v4 .deco-ring .arc { opacity: 0.55; }
body.v4 .deco-ring.ring-gold .arc { stroke: var(--gold); opacity: 0.5; }
body.v4 .deco-ring.ring-faint .arc { opacity: 0.3; }
@media (max-width: 999px) {
  body.v4 .deco-ring.ring-side { display: none; }
}

/* ───── The Token: physical metal ─────
   One-time light sweep when a large coin enters view. */
body.v4 .coin.lg, body.v4 .coin.xl, body.v4 .dl-coin { overflow: hidden; }
body.v4 .coin.lg::after, body.v4 .coin.xl::after, body.v4 .dl-coin::after {
  content: ""; position: absolute; inset: -10%;
  border-radius: 50%;
  background: linear-gradient(115deg,
    transparent 32%,
    rgba(255,255,255,0.0) 40%,
    rgba(255,255,255,0.55) 48%,
    rgba(255,255,255,0.14) 54%,
    transparent 64%);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}
body.v4 .coin.sheen-play::after {
  animation: coinSheen 1.5s var(--ease-out) 0.25s forwards;
}
/* drop coin: sheen fires after it lands */
body.v4 .drop-sec.played .drop-coin::after {
  animation: coinSheen 1.5s var(--ease-out) 1.15s forwards;
}
@keyframes coinSheen {
  0%   { transform: translateX(-130%); opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

/* Heavier hero coin shadow — it should feel like it has mass */
body.v4 .hero-coin {
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.3), inset 0 2px 2px rgba(255,255,255,0.5),
              0 26px 44px -16px rgba(8,20,12,0.75);
}
body.v4 .drop-sec.played .drop-shadow { width: 92px; }

/* ───── Narrative closure: the coin comes home at the CTA ─────
   Mirrors the small coin that sits on the app's dashboard ring. */
body.v4 .dl-coin {
  position: absolute; left: 120px; top: 89px;
  width: 27px; height: 27px; font-size: 14px;
  opacity: 0; transform: scale(0.4);
  z-index: 2;
}
body.v4 .dl-ring.played .dl-coin {
  transition: opacity 0.6s var(--ease-out) 1.25s, transform 0.7s var(--ease-out) 1.25s;
  opacity: 1; transform: scale(1);
}
body.v4 .dl-ring.played .dl-coin::after {
  animation: coinSheen 1.4s var(--ease-out) 2s forwards;
}

/* ───── Product presence ───── */
@media (min-width: 1000px) {
  body.v4 .kaydet-stage .phone,
  body.v4 .recover-stage .phone,
  body.v4 .prog-stage .phone { width: 332px; }
}
body.v4 .kaydet-stage .phone,
body.v4 .recover-stage .phone,
body.v4 .prog-stage .phone {
  box-shadow: 0 34px 70px -22px rgba(15,42,28,0.42), 0 6px 14px -6px rgba(15,42,28,0.18),
              inset 0 0 0 1.5px rgba(255,255,255,0.12);
}

/* ───── Quiet depth ─────
   v4.js writes --py per element; transform-only, rAF-driven. */
body.v4 [data-parallax] { will-change: transform; }
body.v4 .phone[data-parallax] { transform: translateY(var(--py, 0px)); }
body.v4 .hero-coin[data-parallax] { transform: translateY(var(--py, 0px)) rotate(12deg); }

/* ───── Bridges: the stem grows toward the coin ───── */
body.v4 .bridge .stem {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.9s var(--ease-out) 0.1s;
}
body.v4 .bridge.in .stem { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  body.v4 .coin::after, body.v4 .dl-coin::after { animation: none !important; opacity: 0 !important; }
  body.v4 .dl-coin { opacity: 1 !important; transform: scale(1) !important; transition: none !important; }
  body.v4 .bridge .stem { transform: scaleY(1); transition: none; }
  body.v4 [data-parallax] { will-change: auto; }
  body.v4 .phone[data-parallax] { transform: none; }
  body.v4 .hero-coin[data-parallax] { transform: rotate(12deg); }
}