/* ============================================================
   SUSPENSE REELS (PLAN-24 Workstream B) — the pre-reveal theater.

   Chrome-side only (the reveal treaty binds): this overlay lives on the
   stage, runs across the submit->open wait, and clears BEFORE playReveal.
   Blind spin is a CSS animation (compositor thread — it must not fight
   warmReveal's GPU work on the main thread, MEASURED-21); settles are
   WAAPI transforms driven from suspense.js. transform/opacity only.

   Type is the block display font (--font-brand = Varien stand-in via
   Poppins 700 — flag stands until the real bbdesign repo lands).
   ============================================================ */

/* fixed full-viewport (the pack canvas #stageLayer is fixed too — on the
   mobile shell #stage is only a band, and a stage-scoped veil missed the
   pack entirely); above the stage grid, below the header */
.suspense{position:fixed;inset:0;z-index:35;display:grid;
  grid-template-columns:1fr auto 1fr;grid-template-areas:"year rarity company";
  align-items:center;justify-items:center;padding:0 4%;
  /* NO veil (Luke: the pack must not dim during the spins) — the acts sit
     at the sides and below the pack, over the stage's own dark ground, and
     the type carries its own dark halo */
  background:none;
  opacity:0;pointer-events:none;transition:opacity 300ms var(--ease-out)}
.suspense[data-on="1"]{opacity:1}

.sus{display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  /* no plate behind the numbers (Luke: the square cut-off had to go) —
     the dark text halo on the items does the separating */
  padding:var(--s4) var(--s5);
  /* one act at a time (Luke, 20 Aug: "year... then grade, then rarity"):
     every zone starts unseen and rises in when its act begins */
  opacity:0;transform:translateY(14px);
  transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out)}
.sus--in{opacity:1;transform:none}
.sus--year{grid-area:year}
.sus--company{grid-area:company}
.sus--rarity{grid-area:rarity}
.sus--off{opacity:0!important;transition:opacity 350ms var(--ease-out)}  /* null field: fade, never settle */

.sus__label{font:400 var(--fs-xs)/1 var(--font-display);letter-spacing:.32em;
  text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
/* the narrow-screen reel layout runs to the SHELL LINE (1024, shell.css):
   MEASURED at 768x1024 and 820x1180, the desktop's three-across grid
   ("year rarity company") put the COMPANY reel at x=806 and x=910 — 188px
   and 255px off the right edge of the screen — and left the status line
   off-centre with it. */
@media (max-width:1023px){
  .sus__label{letter-spacing:.22em}
}

/* the reels: a masked viewport over a travelling strip */
.sus__row{display:flex;gap:.06em}
.sus__reel{position:relative;overflow:hidden;
  font-family:var(--font-brand);font-weight:700;text-transform:uppercase;
  line-height:1.15;height:1.15em;
  /* band widened (Luke's screenshot: a digit passing through the fade zone
     read as an EMPTY slot — "how can a year only be three digits") */
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.25),#000 26%,#000 74%,rgba(0,0,0,.25));
  mask-image:linear-gradient(180deg,rgba(0,0,0,.25),#000 26%,#000 74%,rgba(0,0,0,.25))}
.sus__strip{display:flex;flex-direction:column;will-change:transform}
.sus__item{height:1.15em;display:flex;align-items:center;justify-content:center;
  color:var(--text);white-space:nowrap;
  /* the dark halo separates white type from bright pack art behind it */
  text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 26px rgba(0,0,0,.7)}

/* blind spin: strip content is repeated 3x, one cycle = -33.3333%.
   The rarity reel spins DOWN like a real slot (Luke, 20 Aug); the year
   keeps spinning up so the numbers read as counting up */
@keyframes sus-spin{from{transform:translateY(0)}to{transform:translateY(-33.3333%)}}
.sus__strip[data-spin="1"]{animation:sus-spin var(--sus-dur,.72s) linear infinite}
.sus__strip[data-dir="down"][data-spin="1"]{animation-direction:reverse}

/* sizes (Luke, 20 Aug review): year and grade the SAME size, rarity the
   biggest and at the BOTTOM, below the pack, never across its middle */
.sus--year .sus__reel{font-size:clamp(30px,4.6vh,54px)}
.sus--company .sus__reel{font-size:clamp(30px,4.6vh,54px)}
.sus--rarity .sus__reel{font-size:clamp(52px,8.6vh,104px)}
.sus--rarity{align-self:end;margin-bottom:calc(5vh + 30px)}

/* rarity tiers wear their own colours (the odds rows' ramp) — the lock glow
   rides currentColor so each tier glows in its colour */
.sus__item[data-tier]{text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 26px rgba(0,0,0,.7)}
/* Luke's mapping, 20 Aug: common GREEN, rare BLUE, epic PURPLE,
   legendary GOLD (uncommon has no assigned colour yet — neutral) */
.sus__item[data-tier="common"]{color:#00E603}
.sus__item[data-tier="uncommon"]{color:var(--gray-300,#AEAFBB)}
.sus__item[data-tier="rare"]{color:#1E92FF}
.sus__item[data-tier="epic"]{color:#DD2BFF}
.sus__item[data-tier="legendary"]{color:var(--accent)}

/* the settle: suspense.js swaps the spin for a WAAPI ease-out, then marks
   the reel set — the landed value takes the accent (or its tier colour)
   and glows in it */
.sus__reel[data-set="1"] .sus__strip{will-change:auto}
/* a locked reel stops being a window (Luke: "the square lines stop the
   light"): the losing rows go, the clip box and mask come off, and the
   winner's glow blooms with nothing to cut it */
.sus__reel[data-set="1"]{overflow:visible;-webkit-mask-image:none;mask-image:none}
.sus__reel[data-set="1"] .sus__item:not([data-hit="1"]){opacity:0}
.sus__reel[data-set="1"] .sus__item:not([data-tier]){color:var(--text)}
.sus__reel[data-set="1"] .sus__item[data-hit="1"]:not([data-tier]){color:var(--accent)}
.sus__reel[data-set="1"] .sus__item[data-hit="1"]{
  text-shadow:0 0 18px currentColor,0 0 56px rgba(0,0,0,.001);
  filter:drop-shadow(0 0 26px currentColor)}
@keyframes sus-lock{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
.sus__reel[data-set="1"] .sus__item[data-hit="1"]{animation:sus-lock 260ms var(--ease-out)}

/* the honest status line rides small under the rarity reel (D2: keep or
   kill at Luke's gate) */
.sus__status{grid-area:rarity;align-self:end;margin-bottom:max(1.6vh,12px);
  font:600 var(--fs-sm)/1.4 var(--font-display);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint);min-height:1.4em;
  transition:opacity 250ms var(--ease-out)}

@media (max-width:1023px){
  .suspense{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;
    grid-template-areas:"year company" "rarity rarity";padding:14vh 5% 0;
    align-items:start}
  .sus--year .sus__reel{font-size:clamp(26px,7vw,40px)}
  .sus--company .sus__reel{font-size:clamp(26px,7vw,40px)}
  .sus--rarity .sus__reel{font-size:clamp(40px,11.5vw,64px)}
  .sus--rarity{align-self:end;margin-bottom:calc(14vh + env(safe-area-inset-bottom,0px))}
  .sus__status{margin-bottom:calc(6vh + env(safe-area-inset-bottom,0px))}
}

/* reduced motion: suspense.js never starts here (the plain status line
   stays), but if the overlay ever exists, nothing travels */
@media (prefers-reduced-motion: reduce){
  .sus__strip[data-spin="1"]{animation:none}
}