/* ============================================================================
   RIPVAULT — Slab Reveal Scene
   Premium loot-reveal after Pack Selection. GPU-only per-frame work
   (transform + opacity; no animated filters); GSAP owns the sequence timing.
   Independent overlay — the Pack Selection scene is untouched, just hidden.
   ============================================================================ */
.sr{position:fixed;inset:0;background:#000;overflow:hidden;color:#fff;z-index:200;
  font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;
  --sr-accent:#c9a961;--sr-band:linear-gradient(180deg,#4a4e57,#33363d);}
.sr *{-webkit-user-drag:none;}

/* per-rarity tokens (accent + banner band) */
.sr[data-rarity="common"]{--sr-accent:#c3c8d2;--sr-band:linear-gradient(180deg,#4a4e57,#31343b);}
.sr[data-rarity="rare"]{--sr-accent:#5b9bff;--sr-band:linear-gradient(180deg,#1e40af,#17307a);}
.sr[data-rarity="epic"]{--sr-accent:#b57bff;--sr-band:linear-gradient(180deg,#6d28d9,#49197f);}
.sr[data-rarity="mythic"]{--sr-accent:#f2c14e;--sr-band:linear-gradient(180deg,#c48f16,#7f520f);}

.sr__ambient{position:absolute;left:50%;top:50%;width:min(92vw,700px);height:min(92vw,700px);
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(90,100,150,.14),transparent 70%);filter:blur(14px);}

/* sound toggle (reveal-local; the Pack Selection toggle is hidden with its scene) */
.sr__sound{position:absolute;top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));
  width:46px;height:46px;z-index:20;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#e8e8ee;
  backdrop-filter:blur(8px);transition:background .15s,transform .1s;}
.sr__sound:active{transform:scale(.94);}
.sr__sound:focus-visible{outline:2px solid #7b9bff;outline-offset:2px;}
.sr__sound svg{width:22px;height:22px;}

/* centered stage */
.sr__stage{position:absolute;inset:0;display:grid;place-items:center;z-index:2;}

/* slab — empty + real layers share one centered, responsive box */
.sr__slab{position:relative;z-index:3;visibility:hidden;
  height:clamp(340px,61vh,780px);aspect-ratio:660/860;max-width:90vw;will-change:transform,opacity;}
.sr__slab-empty,.sr__slab-real{position:absolute;inset:0;
  background-position:center;background-repeat:no-repeat;background-size:contain;will-change:opacity;}
.sr__slab-real{opacity:0;}
/* CSS-drawn empty slab until /images/slabs/ripvault-empty-slab.webp is dropped */
.sr__slab-empty.is-fallback{background:linear-gradient(160deg,#171922,#0a0b10);
  border:1px solid rgba(255,255,255,.10);border-radius:20px;
  box-shadow:0 34px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07);}
.sr__slab-empty.is-fallback::after{content:"RIPVAULT";position:absolute;inset:0;display:grid;place-items:center;
  font-weight:900;letter-spacing:.32em;font-size:clamp(13px,3.2vw,18px);color:rgba(255,255,255,.16);}
.sr__slab-real.is-fallback{background:linear-gradient(160deg,#1b1d26,#0c0d12);
  border:1px solid rgba(255,255,255,.10);border-radius:20px;}
.sr__slab-real.is-fallback::after{content:"CARD";position:absolute;inset:0;display:grid;place-items:center;
  font-weight:900;letter-spacing:.3em;font-size:14px;color:rgba(255,255,255,.2);}
/* restrained one-shot light sweep on the real slab */
.sr__sheen{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;border-radius:16px;}
.sr__sheen::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:36%;opacity:0;
  transform:translateX(-140%) skewX(-16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);}
.sr__sheen.is-sweep::before{animation:srSweep .72s ease-out forwards;}
@keyframes srSweep{0%{opacity:0;transform:translateX(-140%) skewX(-16deg)}
  22%{opacity:1}100%{opacity:0;transform:translateX(340%) skewX(-16deg)}}

/* metadata reveal — temporarily covers the slab presentation */
.sr__meta{position:absolute;inset:0;display:grid;place-items:center;z-index:6;pointer-events:none;opacity:0;}
.sr__meta-list{display:flex;flex-direction:column;gap:clamp(16px,3.4vh,26px);text-align:center;}
.sr__meta-item{opacity:0;}
.sr__meta-label{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.44);
  font-weight:700;margin-bottom:5px;}
.sr__meta-value{font-size:clamp(26px,7vw,42px);font-weight:800;letter-spacing:.01em;line-height:1;}
.sr__meta-item--rarity .sr__meta-value{color:var(--sr-accent);text-transform:uppercase;font-style:italic;
  text-shadow:0 2px 18px color-mix(in srgb,var(--sr-accent) 45%,transparent);}

/* Tap to Reveal — small, ~50% opacity, subtle breathing only */
.sr__tap{position:absolute;left:0;right:0;bottom:calc(12vh + env(safe-area-inset-bottom));
  text-align:center;z-index:7;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:#fff;
  font-weight:700;opacity:0;pointer-events:none;}
.sr__tap.is-on{animation:srBreath 2.4s ease-in-out infinite;}
@keyframes srBreath{0%,100%{opacity:.34}50%{opacity:.56}}

/* result panel — ONE flowing bottom column (info → actions/continue) so the
   slab, card info and buttons can never overlap; the slab is tween-fitted into
   the space above it at RESULT time */
.sr__panel{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(3vh + env(safe-area-inset-bottom));z-index:9;width:min(92vw,430px);
  display:flex;flex-direction:column;align-items:stretch;gap:12px;
  pointer-events:none;}                      /* invisible panel must never eat Tap-to-Reveal taps */
.sr__actions{pointer-events:auto;}
.sr__info{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;
  pointer-events:none;text-align:center;}
.sr__info-name{font-size:clamp(15px,4.4vw,20px);font-weight:800;line-height:1.35;max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sr__info-badge{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  padding:4px 12px;border-radius:999px;color:var(--sr-accent);border:1px solid var(--sr-accent);}
.sr__info-value{font-size:clamp(14px,3.8vw,18px);font-weight:700;color:#c9a961;
  font-variant-numeric:tabular-nums;}
.sr__continue{opacity:0;pointer-events:none;font-family:inherit;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;font-size:13px;color:#0a0a0c;background:#fff;border:none;border-radius:999px;
  padding:14px 42px;min-height:48px;cursor:pointer;box-shadow:0 12px 34px rgba(255,255,255,.14);align-self:center;}
.sr__continue:focus-visible{outline:2px solid #7b9bff;outline-offset:3px;}

/* rarity banner — full-width strip, HTML/CSS/GSAP, covers the slab while passing.
   Two independent layers: the strip+pattern (Layer B, overflow-clipped) and the
   large word (Layer A foreground) as a GRID sibling so it is NOT clipped by the
   strip and can overflow the band vertically per the reference. */
.sr__banner{position:absolute;left:50%;top:50%;z-index:12;width:180vw;visibility:hidden;
  pointer-events:none;display:grid;will-change:transform;}
.sr__banner-strip{grid-area:1/1;position:relative;overflow:hidden;padding:clamp(20px,4.2vh,34px) 0;
  background:var(--sr-band);box-shadow:0 22px 64px rgba(0,0,0,.5);}
.sr__banner-bg{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;
  font-weight:900;font-size:clamp(30px,6vw,46px);letter-spacing:.12em;color:rgba(255,255,255,.14);
  will-change:transform;pointer-events:none;}
.sr__banner-word{grid-area:1/1;align-self:center;justify-self:center;position:relative;z-index:1;
  text-align:center;font-weight:900;font-style:italic;white-space:nowrap;
  font-size:clamp(40px,12vw,112px);color:#fff;letter-spacing:.02em;line-height:1;will-change:transform,opacity;
  text-shadow:0 5px 24px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.22);}

/* pack-exit clone (Step 1) */
.sr__packexit{position:absolute;z-index:15;object-fit:contain;pointer-events:none;
  will-change:transform,opacity;display:none;}

/* production result-actions container (populated by the integration page);
   lives INSIDE .sr__panel so it can never collide with the slab or card info */
.sr__actions{width:100%;display:flex;flex-direction:column;gap:10px;}
.sr-sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

@media (prefers-reduced-motion: reduce){
  .sr__tap.is-on{animation-duration:3.6s;}
  .sr__sheen{display:none;}
}