/* ===========================================================
   $SEED — THE REELS  (site/fx/reels.css)

   Every hidden word slot on the page is a slot-machine reel: a steel
   drum of BIP39 words rolling behind a little window with an orange
   payline. When the word drops the drum brakes, overshoots, clunks,
   and the word is left punched into the plate — so a finished seed
   reads like a Cryptosteel cassette, not a text list.

   Layers (by class, all added by reels.js, never replacing core DOM):
     .on          revealed word, engraved treatment (core's class)
     .rl-spin     drum rolling (CSS animation on ::after, compositor only)
     .rl-fast     the vault is dropping/open — the race is on
     .rl-landing  900 ms JS brake, ::after driven by --rl-y (line units)
     .rl-landed   the clunk: punch + dust puff + ink smudge (::before)
     .rl-off      container off-screen → drums paused
     html.rl-hidden  tab hidden → drums paused

   Source order matters: engraved < drum < landed, same specificity,
   later wins. Tile sizes are never changed (28 px / 26 px stay).
   =========================================================== */

/* ---------- 1. ENGRAVED — a revealed word is punched into steel ---------- */
/* only the card tiles need position:relative; a .jslot is already position:absolute (the core places it
   on the door ring) and must stay that way or all 12 slots fall out of the ring into a stack */
.v-words li.on{position:relative}
.v-words li.on,
.jslot.on{
  color:#262827;
  text-transform:uppercase;
  letter-spacing:.05em;
  /* letterpress: light rim under the glyph, dark rim above = pressed INTO the plate */
  text-shadow:0 1px 0 rgba(255,255,255,.85),0 -1px 0 rgba(0,0,0,.28);
  background:
    /* punched index rail: one hole every 6 px down the left edge */
    radial-gradient(circle at 3px 3px,rgba(0,0,0,.6) 1.1px,rgba(0,0,0,0) 1.8px) 0 0/100% 6px repeat-y,
    /* brushed steel grain */
    repeating-linear-gradient(180deg,rgba(255,255,255,.3) 0 1px,rgba(0,0,0,0) 1px 3px),
    linear-gradient(180deg,#eceeea 0%,#d7dad6 55%,#c6cac6 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.3),inset 1px 0 0 rgba(0,0,0,.08),2px 2px 0 var(--ink);
}
.v-words li.on small,
.jslot.on small{color:#5c605d;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.v-words li.on small{margin-left:3px}
/* the door slots keep a hazard-yellow rail so the jackpot still reads as the jackpot */
.jslot.on{
  background:
    radial-gradient(circle at 2.5px 3px,rgba(0,0,0,.62) 1px,rgba(0,0,0,0) 1.6px) 0 0/100% 6px repeat-y,
    linear-gradient(90deg,var(--yellow) 0 5px,rgba(0,0,0,0) 5px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.3) 0 1px,rgba(0,0,0,0) 1px 3px),
    linear-gradient(180deg,#eceeea 0%,#d7dad6 55%,#c6cac6 100%);
}

/* a card with the whole seed out becomes one steel plate with corner screws */
.vault.cracked .v-words,
.vault.open .v-words{
  padding:7px;gap:4px;border:2px solid var(--ink);
  background:
    radial-gradient(circle at 5px 5px,#555a56 1.4px,#b9bdb9 1.7px,rgba(0,0,0,0) 2.8px),
    radial-gradient(circle at calc(100% - 5px) 5px,#555a56 1.4px,#b9bdb9 1.7px,rgba(0,0,0,0) 2.8px),
    radial-gradient(circle at 5px calc(100% - 5px),#555a56 1.4px,#b9bdb9 1.7px,rgba(0,0,0,0) 2.8px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px),#555a56 1.4px,#b9bdb9 1.7px,rgba(0,0,0,0) 2.8px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0 1px,rgba(0,0,0,0) 1px 4px),
    linear-gradient(180deg,#d4d7d3,#b4b8b4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.25),3px 3px 0 var(--ink);
}
.vault.cracked .v-words::before,
.vault.open .v-words::before{
  content:"STEEL PLATE · 12 / 12 WORDS";
  grid-column:1 / -1;
  font:800 9px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:#454846;text-shadow:0 1px 0 rgba(255,255,255,.6);
  padding:1px 0 2px 8px;
}

/* ---------- 2. THE DRUM — hidden slot = rolling reel ---------- */
.v-words li.rl-spin,
.v-words li.rl-landing,
.jslot.rl-spin,
.jslot.rl-landing{
  --rl-lh:24px;                       /* 28 px tile − 2×2 px border = the window height */
  overflow:hidden;
  color:transparent;text-shadow:none; /* the core's text node stays in the DOM, we just hide it behind the drum */
  animation:none;                     /* cancels the core's .new stamp while we own the tile */
  background:
    /* payline ticks, left and right of the window */
    linear-gradient(var(--orange),var(--orange)) 0 50%/3px 2px no-repeat,
    linear-gradient(var(--orange),var(--orange)) 100% 50%/3px 2px no-repeat,
    /* the cylinder: dark at the rims, bright at the payline */
    linear-gradient(180deg,#7f847f 0%,#b8bcb8 14%,#eef0ec 46%,#eef0ec 54%,#b8bcb8 86%,#7f847f 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset 2px 2px 0 rgba(0,0,0,.14);
}
.v-words li.rl-spin,
.v-words li.rl-landing{position:relative}  /* never on .jslot: it is absolute on the door ring */
.jslot.rl-spin,
.jslot.rl-landing{
  --rl-lh:22px;                       /* 26 px tile − border */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),2px 2px 0 var(--ink);
}
.v-words li.rl-spin small,
.v-words li.rl-landing small{color:var(--mute);position:relative;z-index:1}
.jslot.rl-spin small,
.jslot.rl-landing small{position:absolute;left:5px;top:50%;transform:translateY(-50%);color:var(--mute);z-index:1}

/* the strip itself: data-rl holds 9 words separated by newlines, one per line of --rl-lh.
   Line 8 repeats line 0 so an 8-line roll wraps seamlessly. */
.v-words li.rl-spin::after,
.v-words li.rl-landing::after,
.jslot.rl-spin::after,
.jslot.rl-landing::after{
  content:attr(data-rl);
  position:absolute;left:23px;right:4px;top:0;height:auto;
  flex:none;margin:0;padding:0;background:none;opacity:1;   /* undo the core's li.lock::after dash bar */
  white-space:pre;overflow:visible;
  font:inherit;line-height:var(--rl-lh);
  color:var(--ink);text-shadow:none;text-transform:uppercase;letter-spacing:.05em;
  transform:translateY(calc(var(--rl-y,0) * var(--rl-lh) * -1));
}
.jslot.rl-spin::after,
.jslot.rl-landing::after{left:13px;right:2px;text-align:center;letter-spacing:.02em}

/* rolling: pure compositor work, phase handed over by reels.js as a negative delay */
.rl-spin::after{animation:rl-roll var(--rl-dur,26s) linear var(--rl-delay,0ms) infinite}
@keyframes rl-roll{from{transform:translateY(0)}to{transform:translateY(calc(var(--rl-lh,24px) * -8))}}

/* the race is on: faster drum, a little motion smear on the letters, warm rims */
.v-words li.rl-fast::after,
.jslot.rl-fast::after{text-shadow:0 -3px 0 rgba(18,18,18,.13),0 3px 0 rgba(18,18,18,.13)}
.v-words li.rl-fast,
.jslot.rl-fast{box-shadow:inset 0 0 0 1px rgba(255,74,28,.45),inset 2px 2px 0 rgba(0,0,0,.14)}
.jslot.rl-fast{box-shadow:inset 0 0 0 1px rgba(255,74,28,.45),2px 2px 0 var(--ink)}

/* braking: the JS owns the transform through --rl-y for 900 ms */
.v-words li.rl-landing::after,
.jslot.rl-landing::after{animation:none;will-change:transform}

/* ---------- 3. THE CLUNK — punch, dust, ink ---------- */
/* individual transform props so the door slot's inline translate() is left alone */
.v-words li.rl-landed,
.jslot.rl-landed{
  overflow:visible;z-index:3;
  animation:rl-punch .5s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes rl-punch{
  0%  {scale:1.1;translate:0 -3px;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.3),6px 7px 0 var(--ink)}
  32% {scale:.95;translate:0 2px;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.3),0 0 0 var(--ink)}
  62% {scale:1.02;translate:0 0;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.3),3px 3px 0 var(--ink)}
  100%{scale:1;translate:0 0;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.3),2px 2px 0 var(--ink)}
}
.v-words li.rl-landed::before,
.jslot.rl-landed::before{
  content:"";position:absolute;inset:-8px;pointer-events:none;z-index:2;
  background:
    /* dust grains thrown out of the punch */
    radial-gradient(circle at 12% 78%,rgba(18,18,18,.6) 0 1.5px,rgba(0,0,0,0) 2.5px),
    radial-gradient(circle at 88% 22%,rgba(18,18,18,.5) 0 1.2px,rgba(0,0,0,0) 2.2px),
    radial-gradient(circle at 70% 92%,rgba(18,18,18,.5) 0 1.6px,rgba(0,0,0,0) 2.6px),
    radial-gradient(circle at 28% 8%,rgba(18,18,18,.45) 0 1px,rgba(0,0,0,0) 2px),
    radial-gradient(circle at 94% 70%,rgba(18,18,18,.4) 0 1.2px,rgba(0,0,0,0) 2.2px),
    radial-gradient(circle at 6% 30%,rgba(18,18,18,.4) 0 1px,rgba(0,0,0,0) 2px),
    /* ink smudge squeezed out under the plate */
    radial-gradient(ellipse 60% 30% at 50% 100%,rgba(18,18,18,.38),rgba(0,0,0,0) 70%),
    /* the hazard flash of the hit */
    radial-gradient(ellipse 70% 60% at 50% 50%,rgba(255,210,58,.85),rgba(0,0,0,0) 72%);
  animation:rl-puff .6s cubic-bezier(.1,.7,.3,1) both;
}
@keyframes rl-puff{0%{opacity:1;scale:.6}100%{opacity:0;scale:1.45}}

/* ---------- 4. SAVING THE MACHINE ---------- */
.rl-off .rl-spin::after,
html.rl-hidden .rl-spin::after{animation-play-state:paused}

@media (max-width:420px){
  .v-words li.rl-spin::after,
  .v-words li.rl-landing::after{left:21px;right:3px;letter-spacing:.03em}
}

@media (prefers-reduced-motion:reduce){
  /* reels.js never attaches a drum here; this is the belt-and-braces for a mid-session switch */
  .rl-spin::after,.rl-landing::after{animation:none;transform:none;content:"• • • •";text-align:center}
  .rl-landed::before{display:none}
}