/* Hindsight - reveals. The moments where the truth comes out, paced so they land.
   Colours come from the theme variables only. Everything here switches off for
   people who ask their device for reduced motion. */

/* ---- Staged: the parts of a result arrive one after another ------------------ */
@keyframes hs-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.staged > * { animation: hs-rise .5s cubic-bezier(.2,.7,.2,1) both;
               animation-delay: var(--at, 0s); }
.staged > *:nth-child(2)  { --at: .35s; }
.staged > *:nth-child(3)  { --at: .9s; }
.staged > *:nth-child(4)  { --at: 1.4s; }
.staged > *:nth-child(5)  { --at: 1.8s; }
.staged > *:nth-child(6)  { --at: 2.15s; }
.staged > *:nth-child(7)  { --at: 2.45s; }
.staged > *:nth-child(8)  { --at: 2.7s; }
.staged > *:nth-child(n+9) { --at: 2.9s; }
/* Tiles inside a staged block deal out like cards, after their row's turn. */
.staged > .tiles, .staged > .result-stats { animation: none; }
.staged .tiles > *, .staged .result-stats > * { animation: hs-rise .45s cubic-bezier(.2,.7,.2,1) both;
                     animation-delay: calc(var(--at, 0s) + var(--deal, 0s)); }
.staged .tiles > *:nth-child(2), .staged .result-stats > *:nth-child(2) { --deal: .14s; }
.staged .tiles > *:nth-child(3), .staged .result-stats > *:nth-child(3) { --deal: .28s; }
.staged .tiles > *:nth-child(4), .staged .result-stats > *:nth-child(4) { --deal: .42s; }
.staged .tiles > *:nth-child(n+5), .staged .result-stats > *:nth-child(n+5) { --deal: .56s; }

/* The coin flips first; everything after it waits for the flip to land. */
.staged.coin-first > *:nth-child(n+2) { animation-delay: calc(var(--at, 0s) + 1.3s); }
.staged.coin-first .tiles > * { animation-delay: calc(var(--at, 0s) + 1.3s + var(--deal, 0s)); }

/* ---- Draw-in: a chart's lines are drawn left to right ------------------------ */
/* --draw-from is where the new part starts (0% draws everything). Two identical
   keyframes, alternated by the page, restart the animation on every new reveal. */
@keyframes hs-draw-a { from { clip-path: inset(0 calc(100% - var(--draw-from, 0%)) 0 0); }
                       to   { clip-path: inset(0 0 0 0); } }
@keyframes hs-draw-b { from { clip-path: inset(0 calc(100% - var(--draw-from, 0%)) 0 0); }
                       to   { clip-path: inset(0 0 0 0); } }
.draw-in.draw-a .scatterlayer { animation: hs-draw-a var(--draw-time, 1.8s) cubic-bezier(.35,.1,.25,1) both; }
.draw-in.draw-b .scatterlayer { animation: hs-draw-b var(--draw-time, 1.8s) cubic-bezier(.35,.1,.25,1) both; }

/* ---- The coin: a hidden truth that flips over -------------------------------- */
@keyframes hs-flip { 0% { transform: rotateY(0); } 60% { transform: rotateY(200deg); }
                     100% { transform: rotateY(180deg); } }
.coin { width: 112px; height: 112px; perspective: 700px; flex: none; }
.coin-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: hs-flip 1.1s cubic-bezier(.3,.1,.3,1) .45s both; }
.coin-face { position: absolute; inset: 0; border-radius: 50%; display: flex;
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font-family: var(--mono); font-weight: 700; letter-spacing: .12em; font-size: 11px;
  border: 2px solid var(--line-strong); background: var(--raise); color: var(--dim); }
.coin-face .big { font-size: 34px; letter-spacing: 0; line-height: 1; }
.coin-back { transform: rotateY(180deg); }
.coin.real .coin-back { border-color: var(--up); color: var(--up-ink); }
.coin.noise .coin-back { border-color: var(--warn); color: var(--warn-ink); }
.reveal-head { display: flex; gap: 22px; align-items: center; }
.reveal-head > div:last-child { flex: 1; min-width: 0; }
@media (max-width: 560px) { .reveal-head { flex-direction: column; align-items: flex-start; } }

/* ---- Stamps: REAL / RANDOM dropped onto a chart ------------------------------ */
@keyframes hs-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(2.2); }
                      70% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(.94); }
                      100% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } }
.stamp-host { position: relative; }
.stamp { position: absolute; left: 50%; top: 46%; z-index: 3; pointer-events: none;
  font-family: var(--mono); font-weight: 800; font-size: 26px; letter-spacing: .2em;
  padding: 6px 16px; border: 3px solid currentColor; border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  animation: hs-stamp .5s cubic-bezier(.2,.8,.3,1.2) both; }
.stamp.real { color: var(--up-ink); }
.stamp.fake { color: var(--dim); }
.stamp:empty { display: none; }

/* ---- Movement: a rank going up or down the league table ----------------------- */
@keyframes hs-slide-up   { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hs-slide-down { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.move { font-family: var(--mono); white-space: nowrap; display: inline-block; }
.move.up { color: var(--up-ink); animation: hs-slide-up .6s ease-out both; }
.move.down { color: var(--down-ink); animation: hs-slide-down .6s ease-out both; }
.move.flat { color: var(--dim); }
.staged .move { animation-delay: calc(var(--at, 0s) + .3s); }

/* ---- A result lands: a short glow around the verdict ------------------------- */
@keyframes hs-glow-won  { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); }
                          100% { box-shadow: 0 0 0 18px transparent; } }
@keyframes hs-glow-lost { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--down) 45%, transparent); }
                          100% { box-shadow: 0 0 0 18px transparent; } }
.verdict.staged.won  { animation: hs-glow-won 1.2s ease-out .4s both; }
.verdict.staged.lost { animation: hs-glow-lost 1.2s ease-out .4s both; }

@media (prefers-reduced-motion: reduce) {
  .staged > *, .staged .tiles > *, .staged .result-stats > *, .coin-inner, .stamp, .move,
  .draw-in .scatterlayer, .verdict.staged { animation-duration: 1ms !important;
    animation-delay: 0s !important; }
}