/* =========================================================
   Overview page motion (index.html only). Driven by assets/index.js.
   Every timing below comes from these tokens; index.js reads them too.
   Nothing here hides content on its own: hidden start states hang on
   classes the script adds, and all movement is transform and opacity.
   ========================================================= */

:root {
  --mo-ease: cubic-bezier(0.22, 1.08, 0.36, 1);
  --mo-fast: 260ms;
  --mo-base: 560ms;
  --mo-slow: 900ms;
  --mo-long: 2600ms;
  --mo-step: 140ms;
  --mo-idle: 4000ms;
}

/* ---------- Hero: the headline written in ballpoint ---------- */

.hero__title span.hero__ink { position: relative; display: inline-block; margin-right: 0; }
.hero__title span.hero__stroke {
  position: absolute;
  left: -0.03em;
  right: -0.08em;
  bottom: -0.06em;
  display: block;
  height: 0.16em;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__stroke svg { width: 100%; height: 100%; overflow: visible; }
.hero__stroke path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---------- Traders: stations ---------- */

.station { position: relative; }
.station__num { position: relative; overflow: hidden; }
.station__digit, .station__tick { grid-area: 1 / 1; display: grid; place-items: center; }
.station__tick { opacity: 0; }
.station__num.is-checked .station__digit { opacity: 0; transform: translateY(-100%); }
.station__num.is-checked .station__tick { opacity: 1; }
.station__stamp { position: absolute; top: var(--s-5); right: var(--s-5); transform: rotate(-7deg); pointer-events: none; }

.cardback li { position: relative; }
.cardback li::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 46px;
  height: 8px;
  margin-top: -4px;
  border-radius: 2px;
  background: var(--blush);
  transform-origin: left center;
  transform: scaleX(0);
}
.cardback li:nth-child(1) { --n: 0; --fill: 0.86; }
.cardback li:nth-child(2) { --n: 1; --fill: 0.62; }
.cardback li:nth-child(3) { --n: 2; --fill: 0.44; }
.cardback li:nth-child(4) { --n: 3; --fill: 0.7; }
.cardback li:nth-child(5) { --n: 4; --fill: 0.54; }
.station--dark.is-in .cardback li::before { transform: scaleX(var(--fill)); }

.traders__end.is-waiting p { opacity: 0; transform: translate(56px, 10px) rotate(5deg); }

/* ---------- Captains: the fanned hand ---------- */

.fan__card {
  --spread: 0;
  --lift: 0px;
  --keep: 1;
  transform:
    translate(calc(var(--x) + var(--spread) * 12px), calc(var(--y) - var(--lift)))
    rotate(calc(var(--rot) * var(--keep) + var(--spread) * 4deg));
}
.fan__face { transform: translate(var(--px, 0px), var(--py, 0px)); }
.fan[data-live] .fan__card { z-index: var(--z); }
.fan[data-live] .fan__card.is-lifted { --keep: 0; --lift: 26px; --spread: 0; z-index: 6; }
.fan[data-live] .fan__card--hero { cursor: pointer; }

/* Card back, shown while the hand is stacked face down */
.fan__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--ink);
  background-image:
    repeating-linear-gradient(45deg, var(--sky-a45) 0 1.5px, transparent 1.5px 10px),
    repeating-linear-gradient(-45deg, var(--sky-a45) 0 1.5px, transparent 1.5px 10px);
  box-shadow: inset 0 0 0 8px var(--cobalt), inset 0 0 0 10px var(--blush-a35);
  opacity: 0;
  pointer-events: none;
}
.fan__card.is-down::after { opacity: 1; }

/* The pick dealt into the empty seat */
.captains__seat { position: relative; --drop-x: 0.68; --drop-y: 0.55; }
.seat-drop { position: absolute; width: 44px; height: 63px; pointer-events: none; }
.seat-drop .fan__card {
  position: absolute;
  left: 0;
  top: 0;
  bottom: auto;
  margin: 0;
  transform-origin: 0 0;
  transform: scale(calc(44 / 236));
}
.seat-drop__stamp { position: absolute; left: 50%; top: 100%; margin-top: 8px; transform: translateX(-50%) rotate(-6deg); }
.seat-drop .stamp--invited { background: var(--sheet); }

.fan__card.fan-flyer {
  position: absolute;
  bottom: auto;
  margin: 0;
  z-index: 40;
  transform-origin: 50% 50%;
  transform: none;
  pointer-events: none;
}

/* ---------- Movement (only when motion is welcome) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__title > span { animation: mo-ink var(--mo-slow) var(--mo-ease) both; }
  .hero__title span.hero__stroke { animation: mo-wipe var(--mo-slow) var(--mo-ease) var(--mo-base) both; }
  .hero__stroke svg { animation: mo-wipe-back var(--mo-slow) var(--mo-ease) var(--mo-base) both; }
  .hero__figure.enter-tilt {
    animation-duration: var(--mo-slow);
    animation-timing-function: var(--mo-ease);
    animation-delay: calc(var(--mo-base) + var(--mo-slow) - var(--mo-fast));
  }

  .cardback li::before { transition: transform var(--mo-base) var(--mo-ease) calc(var(--n) * var(--mo-step)); }
  .station__digit { transition: transform var(--mo-fast) var(--mo-ease), opacity var(--mo-fast) var(--mo-ease); }
  .station__num.is-checked .station__tick { animation: stampin var(--mo-base) var(--mo-ease); }
  .station__stamp .stamp { animation: stampin var(--mo-base) var(--mo-ease); }
  .station__num.is-pressed { animation: mo-press var(--mo-base) var(--mo-ease); }
  .traders__end p { transition: transform var(--mo-slow) var(--mo-ease), opacity var(--mo-base) var(--mo-ease); }

  .fan[data-live] .fan__card { transition: transform var(--mo-base) var(--mo-ease); }
  .fan[data-live].is-shuffling .fan__card { transition-duration: var(--mo-slow); }
  .fan[data-live] .fan__face { transition: transform var(--mo-fast) var(--mo-ease); }
  .fan.is-shuffling .fan__seal::before { animation: mo-turn var(--mo-long) var(--mo-ease); }
  .fan__card.is-flipping { animation: mo-flip var(--mo-base) var(--mo-ease); }
  .seat-drop__stamp .stamp { animation: stampin var(--mo-base) var(--mo-ease); }
}

@keyframes mo-ink { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes mo-wipe { from { transform: translateX(-101%); } to { transform: none; } }
@keyframes mo-wipe-back { from { transform: translateX(101%); } to { transform: none; } }
@keyframes mo-press {
  0% { transform: none; }
  40% { transform: scale(1.22) rotate(-8deg); }
  75% { transform: scale(0.9) rotate(2deg); }
  100% { transform: none; }
}
@keyframes mo-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes mo-flip { 0% { scale: 1 1; } 50% { scale: 0 1; } 100% { scale: 1 1; } }