/* "Hold to rewind" playable bridge demo. States on .demo[data-state]:
   broken -> rewinding -> whole, and empty when the meter runs out. */

.demo { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); }

.demo__stage {
  --horizon: 66%;
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 6.2; min-height: 260px;
  border: var(--border); border-radius: 30px; box-shadow: 0 12px 0 var(--ink), 0 30px 80px rgb(255 92 140 / .18);
  background: linear-gradient(var(--sky-top), #3b1f5e 30%, var(--sky-mid) 52%, var(--sky-bottom) var(--horizon));
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
@media (max-width: 640px) { .demo__stage { aspect-ratio: 4 / 3; border-radius: 22px; } }

.demo__sun { position: absolute; z-index: -1; right: 12%; top: calc(var(--horizon) - 30%); width: 24%; max-width: 230px; }

.demo__hud {
  position: absolute; inset: 14px 16px auto; z-index: 3;
  display: flex; align-items: center; gap: .9rem;
}
.demo__label { white-space: nowrap; font: 400 clamp(.85rem, .7rem + .6vw, 1.1rem)/1 var(--font-display); letter-spacing: .06em; color: var(--cyan); text-shadow: 0 2px 0 var(--ink); }
.demo__label span { color: var(--cream); font-variant-numeric: tabular-nums; }
.demo__meter {
  flex: 0 1 260px; height: 16px; overflow: hidden;
  background: rgb(21 17 43 / .6); border: 3px solid var(--ink); border-radius: 999px;
}
.demo__meter-fill {
  display: block; height: 100%; background: linear-gradient(90deg, #2bb8e6, var(--cyan));
  transform-origin: 0 50%; will-change: transform;
}
.demo[data-state="empty"] .demo__meter-fill { background: var(--coral); }

.demo__callout {
  position: absolute; z-index: 3; left: 0; right: 0; top: 24%; margin: 0; padding: 0 1rem; text-align: center;
  font: 400 clamp(1.1rem, .6rem + 2.4vw, 2.4rem)/1 var(--font-display); letter-spacing: .03em; color: var(--cream);
  text-shadow: 0 4px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink);
  transition: transform 260ms var(--ease-snap), color 160ms;
}
.demo[data-state="rewinding"] .demo__callout { color: var(--cyan); }
.demo[data-state="whole"] .demo__callout { color: var(--gold); transform: scale(1.25) rotate(-3deg); }
.demo[data-state="empty"] .demo__callout { color: var(--coral); }

/* Ground, pit and bridge. */
.demo__ground {
  position: absolute; top: var(--horizon); bottom: 0; z-index: 1;
  background: linear-gradient(#3d2b66, #241a45); border-top: 5px solid var(--cream);
}
.demo__ground--left { left: 0; width: 34%; }
.demo__ground--right { right: 0; width: 26%; }
.demo__pit {
  position: absolute; z-index: 0; top: var(--horizon); bottom: 0; left: 34%; right: 26%;
  container-type: size; background: linear-gradient(#0d0a22, #060413);
}
.demo__spikes {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
  background: conic-gradient(from 135deg at 50% 0, var(--coral) 90deg, transparent 0) 0 0 / 26px 24px repeat-x;
}
.demo__bridge { position: absolute; left: -4px; right: -4px; top: -2px; display: flex; gap: 2px; z-index: 2; }
.demo__bridge span {
  flex: 1; height: 16px; background: #c98a5c; border: 3px solid var(--ink); border-radius: 4px;
  box-shadow: inset 0 -4px 0 #9a5c3d;
  transform: none;
  transition: transform 460ms var(--ease-snap) calc((7 - var(--i)) * 55ms);
}
.demo__bridge span:nth-child(1) { --fx: -6px; --fy: 64cqh; --fr: -38deg; }
.demo__bridge span:nth-child(2) { --fx: 10px; --fy: 78cqh; --fr: 52deg; }
.demo__bridge span:nth-child(3) { --fx: -4px; --fy: 70cqh; --fr: -14deg; }
.demo__bridge span:nth-child(4) { --fx: 14px; --fy: 82cqh; --fr: 71deg; }
.demo__bridge span:nth-child(5) { --fx: -12px; --fy: 74cqh; --fr: -63deg; }
.demo__bridge span:nth-child(6) { --fx: 6px; --fy: 80cqh; --fr: 24deg; }
.demo__bridge span:nth-child(7) { --fx: -10px; --fy: 68cqh; --fr: -49deg; }
.demo__bridge span:nth-child(8) { --fx: 4px; --fy: 76cqh; --fr: 33deg; }
.demo[data-state="broken"] .demo__bridge span,
.demo[data-state="empty"] .demo__bridge span {
  transform: translate(var(--fx), var(--fy)) rotate(var(--fr));
  transition: transform 640ms cubic-bezier(.55, 0, .9, .55) calc(var(--i) * 45ms);
}

/* The hero: mint body, one big eye, gold scarf. */
.runner {
  position: absolute; z-index: 2; left: 16%; bottom: calc(100% - var(--horizon) + 5px);
  width: clamp(30px, 4vw, 44px); aspect-ratio: 34 / 40;
  background: var(--mint); border: 3px solid var(--ink); border-radius: 46% 46% 38% 38%;
  animation: runner-bob 360ms ease-in-out infinite alternate;
}
.runner__eye {
  position: absolute; top: 16%; right: 8%; width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle at 62% 50%, var(--ink) 0 30%, #fff 31%);
  border: 2px solid var(--ink); border-radius: 50%;
}
.runner__scarf {
  position: absolute; top: 52%; left: -70%; width: 90%; height: 22%;
  background: var(--gold); border: 2px solid var(--ink); border-radius: 999px;
  transform-origin: 100% 50%; animation: scarf-flap 220ms ease-in-out infinite alternate;
}
@keyframes runner-bob { to { transform: translateY(-5px) rotate(4deg); } }
@keyframes scarf-flap { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }

/* VHS tear while rewinding. */
.demo__stage::after {
  content: ""; position: absolute; inset: -20% 0; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(transparent 0 46%, rgb(255 255 255 / .16) 46% 48%, transparent 48% 78%, rgb(79 216 255 / .14) 78% 79%, transparent 79%);
  transition: opacity 120ms;
}
.demo[data-state="rewinding"] .demo__stage::after { opacity: 1; animation: vhs-roll 700ms linear infinite; }
@keyframes vhs-roll { from { transform: translateY(-15%); } to { transform: translateY(15%); } }

/* Hold button: echoes the in-game ring prompt. */
.demo__controls { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-top: 2rem; text-align: center; }
.hold-btn {
  position: relative; width: 116px; height: 116px; padding: 0; cursor: pointer;
  border: 5px solid var(--ink); border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #a8ecff, var(--cyan) 60%, #23a6d6);
  box-shadow: 0 8px 0 var(--ink);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo);
}
.hold-btn__label { font: 400 1.5rem/1 var(--font-display); letter-spacing: .06em; color: var(--ink); }
.hold-btn__ring {
  position: absolute; inset: -16px; border: 4px solid var(--cyan); border-radius: 50%;
  animation: ring-pulse 1.6s var(--ease-out-expo) infinite;
}
.hold-btn:hover { transform: translateY(-3px); box-shadow: 0 11px 0 var(--ink); }
.hold-btn[aria-pressed="true"] { transform: translateY(7px); box-shadow: 0 1px 0 var(--ink); }
.hold-btn[aria-pressed="true"] .hold-btn__ring { animation-duration: .5s; border-color: var(--mint); }
@keyframes ring-pulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.demo__hint { margin: 0; max-width: 40ch; color: var(--cream-dim); font-size: var(--text-sm); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .runner, .runner__scarf, .hold-btn__ring { animation: none; }
  .demo[data-state="rewinding"] .demo__stage::after { animation: none; }
}