/* =====================================================================
   Stary's Domain Vault
   Classy outside (black, champagne gold, serif, spy-lounge calm)
   Wild inside (psychedelic holo trading cards in graded acrylic cases)
   ===================================================================== */
:root {
  --black: #07060a;
  --night: #0d0b12;
  --text: #ece6da;
  --muted: #a89f8e;
  --gold: #d4af6a;
  --gold-hi: #f6e7bf;
  --gold-lo: #8d6a2e;
  --line: rgba(212, 175, 106, .28);
  --ink: #1a0933;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, sans-serif;
  --foil-gold: linear-gradient(100deg, #8d6a2e 0%, #f6e7bf 28%, #b8914a 48%, #fff3cf 64%, #a07a36 82%, #e9cf8f 100%);
  --oil: repeating-linear-gradient(115deg,
          #ff6fb5 0%, #ffb36b 5%, #f7f36e 10%, #6ff5c4 15%, #5fc3ff 20%, #a98bff 25%, #ff6fb5 30%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); font-variant-numeric: lining-nums; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: transparent;       /* html paints the black so the ambient glow can sit behind content */
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- dark room: slow ambient glow + film grain ---------- */
.ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; animation: hue 60s linear infinite; }
.glow { position: absolute; border-radius: 50%; will-change: transform; animation: drift 30s ease-in-out infinite alternate; }
.g1 { width: 80vmax; height: 80vmax; left: -30vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(120, 40, 160, .30), transparent); }
.g2 { width: 70vmax; height: 70vmax; right: -30vmax; top: 10vh; background: radial-gradient(closest-side, rgba(20, 110, 140, .22), transparent); animation-duration: 38s; animation-delay: -10s; }
.g3 { width: 70vmax; height: 70vmax; left: 10vw; bottom: -40vmax; background: radial-gradient(closest-side, rgba(170, 90, 30, .20), transparent); animation-duration: 44s; animation-delay: -20s; }
@keyframes drift { to { transform: translate(8vw, 6vh) scale(1.12); } }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- small caps eyebrow ---------- */
.eyebrow {
  font-family: var(--sans); font-weight: 600;
  text-transform: uppercase; letter-spacing: .32em; font-size: .72rem;
  color: var(--gold); margin: 0 0 1.4rem;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: clamp(4.5rem, 12vw, 8.5rem) 1.5rem clamp(3.5rem, 8vw, 6rem);
  max-width: 980px; margin: 0 auto;
  overflow: hidden; overflow: clip;
  isolation: isolate;
}
.dial {
  position: absolute; left: 50%; top: 50%;
  width: min(560px, 112vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none; opacity: .8; z-index: -1;
}
.dial span { position: absolute; inset: 0; border-radius: 50%; }
.dial-ticks {
  background: repeating-conic-gradient(from -.4deg, rgba(212, 175, 106, .5) 0 .8deg, transparent .8deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 88.5% 94%, transparent 94.5%);
          mask: radial-gradient(closest-side, transparent 88%, #000 88.5% 94%, transparent 94.5%);
  animation: dial 90s cubic-bezier(.6, 0, .4, 1) infinite alternate;
}
.dial-ring {
  background:
    radial-gradient(closest-side, transparent 97%, rgba(212, 175, 106, .45) 97.5%, transparent 98.5%),
    radial-gradient(closest-side, transparent 80%, rgba(212, 175, 106, .18) 80.5%, transparent 81.5%),
    radial-gradient(closest-side, rgba(212, 175, 106, .06), transparent 70%);
}
.dial .dial-pointer { inset: auto; left: 49.6%; top: 1.5%; width: .8%; height: 4.5%; border-radius: 2px; background: var(--gold); opacity: .8; }
@keyframes dial { 0% { transform: rotate(0); } 30% { transform: rotate(84deg); } 60% { transform: rotate(-42deg); } 100% { transform: rotate(126deg); } }

.monogram {
  width: 58px; height: 58px; margin: 0 auto 1.6rem;
  border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #2a2418, #0b0a0c 70%);
  box-shadow: inset 0 0 0 1px rgba(246, 231, 191, .55), inset 0 0 0 4px #0b0a0c, inset 0 0 0 5px rgba(212, 175, 106, .35), 0 6px 20px rgba(0, 0, 0, .6);
}
.monogram span {
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 2rem; line-height: 1;
  background: var(--foil-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8));
}
.title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.8rem, 8.5vw, 6rem);
  line-height: 1; letter-spacing: -.01em;
  margin: 0 0 1.5rem;
  background: var(--foil-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.5;
  max-width: 600px; margin: 0 auto 2.6rem; color: #d9d1c2;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; cursor: pointer;
  font-family: var(--sans); font-weight: 700;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .22em;
  text-decoration: none; text-align: center;
  padding: 1rem 1.9rem; border-radius: 2px;
  transition: transform .2s, box-shadow .2s, background-color .2s, color .2s;
}
.btn-gold {
  color: #16110a; border: 1px solid #f6e7bf;
  background: var(--foil-gold); background-size: 200% 100%;
  box-shadow: 0 10px 30px -10px rgba(212, 175, 106, .6);
}
.btn-gold:hover, .btn-gold:focus-visible { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 16px 36px -12px rgba(212, 175, 106, .8); }
.btn-line { color: var(--gold-hi); background: transparent; border: 1px solid var(--line); }
.btn-line:hover, .btn-line:focus-visible { border-color: var(--gold); background: rgba(212, 175, 106, .08); }
.btn:focus-visible, .chip:focus-visible, .flip-hit:focus-visible, .flip-back:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }

/* ---------- collection ---------- */
main {
  position: relative;
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1rem, 3vw, 2.5rem) 6rem;
  overflow: hidden; overflow: clip;
}
main > * { max-width: 1220px; margin-left: auto; margin-right: auto; }
/* the collector's table: dark velvet under a soft overhead light */
main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; max-width: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 22%, rgba(255, 236, 200, .06), transparent 70%),
    radial-gradient(ellipse 110% 75% at 50% 45%, transparent 35%, rgba(0, 0, 0, .8) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65 .95' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .08 0 0 0 0 .17 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #08070b 0%, #0e0a13 40%, #0a080d 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head { text-align: center; margin: 0 auto 2.4rem; max-width: 640px; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.3rem, 5vw, 3.4rem);
  margin: 0 0 1rem; color: var(--text); line-height: 1.05;
}
.section-head .sub { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.6rem; margin: 0 0 1.2rem; }
.chip {
  font-family: var(--sans); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .22em;
  color: var(--muted); background: none; border: 0; padding: .6rem .1rem; cursor: pointer;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.chip:hover { color: var(--text); }
.chip.active { color: var(--gold-hi); border-bottom-color: var(--gold); }

.legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; padding: 0; margin: 0 0 3.2rem; }
.legend li { display: inline-flex; align-items: center; gap: .45rem; font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.legend .sym-sm { width: 14px; height: 14px; }
.motion-wrap { text-align: center; margin: -2rem 0 2.5rem; }
.motion-wrap .btn[hidden] { display: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 3rem);
  justify-items: center;
}

/* =====================================================================
   THE CARD  (.tcard = graded acrylic case on the table)
   ===================================================================== */
.tier-common    { --m1: #f4f6f8; --m2: #9ba4ae; --m3: #ffffff; --m4: #5f6873; --tier: #c9d1d9; --foil-frame: .22; --foil-art: .28; --spark: 0;   --art-spark: 0;   --glow: rgba(200, 210, 225, .10); }
.tier-rare      { --m1: #b7efff; --m2: #2a7bd8; --m3: #effcff; --m4: #0b3a8c; --tier: #62d4ff; --foil-frame: .45; --foil-art: .6;  --spark: .35; --art-spark: .25; --glow: rgba(80, 200, 255, .22); }
.tier-ultra     { --m1: #ffc2f0; --m2: #b51fae; --m3: #fff2fc; --m4: #52107a; --tier: #ff72d9; --foil-frame: .65; --foil-art: .8;  --spark: .7;  --art-spark: .55; --glow: rgba(255, 90, 210, .28); }
.tier-legendary { --m1: #fff1b8; --m2: #c8901c; --m3: #fffbea; --m4: #6e4200; --tier: #ffd24a; --foil-frame: .8;  --foil-art: 1;   --spark: 1;   --art-spark: .9;  --glow: rgba(255, 200, 80, .34); }

.tcard {
  --rot: 0deg;
  position: relative;
  width: 100%; max-width: 340px;
  container-type: inline-size;
  perspective: 1200px;
  rotate: var(--rot);
  transition: rotate .5s cubic-bezier(.2, .8, .2, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.tcard.is-active { rotate: 0deg; }
/* soft drop shadow + coloured light spill on the velvet (stays on the table) */
.tcard::before, .tcard::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.tcard::before {
  inset: 6% 4% -5%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .9), rgba(0, 0, 0, .45) 55%, transparent);
  translate: calc(var(--dx, 0) * -22px) calc(14px + var(--dy, 0) * -18px);
  transition: translate .5s;
}
.tcard::after {
  inset: -8% -14%;
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
  opacity: .9;
}

.deal { transform-style: preserve-3d; }
.tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.tcard.posed .tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.tcard.is-active .tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(24px); transition: transform .12s linear; }
.tcard.posed .tilt { transition: transform .15s linear; }

.flipper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.34, 1.36, .5, 1);
}
.tcard.is-flipped .flipper { transform: rotateY(180deg); }
.tcard.is-flipping .flipper { animation: lift .9s ease-out; }
@keyframes lift { 0% { translate: 0 0 0; } 40% { translate: 0 -10px 70px; } 100% { translate: 0 0 0; } }

.face {
  position: relative;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.face.back { position: absolute; inset: 0; transform: rotateY(180deg); }

/* ---------- acrylic slab ---------- */
.slab {
  position: relative;
  border-radius: 3.6cqw;
  padding: 3cqw;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .07) 35%, rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .12)),
    rgba(28, 24, 34, .55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 1.5px 0 rgba(255, 255, 255, .5),
    inset 0 -2px 4px rgba(0, 0, 0, .35),
    0 1px 1px rgba(0, 0, 0, .6),
    0 18px 40px -16px rgba(0, 0, 0, .9);
  isolation: isolate;
}
.slab-body {
  position: relative;
  display: flex; flex-direction: column; gap: 2.8cqw;
  padding: 2.6cqw;
  border-radius: 2.4cqw;
  background: rgba(8, 6, 12, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 2px 10px rgba(0, 0, 0, .55);
}
/* edge-lit acrylic: a thin ring of moving light on rarer cases */
.neon {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
}
.neon::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 180%; aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--tier) 72%, #fff 76%, var(--tier) 80%, transparent 95%);
}
.tier-rare .neon, .tier-ultra .neon { opacity: .75; }
.tier-legendary .neon { opacity: 1; }
.tier-legendary .neon::before {
  background: conic-gradient(from 0deg, #ff6fb5, #ffb36b, #f7f36e, #6ff5c4, #5fc3ff, #a98bff, #ff6fb5);
}
.tcard.in-view .neon::before { animation: spin 7s linear infinite; }
.tier-legendary.in-view .neon::before { animation-duration: 5s; }
@keyframes spin { to { rotate: 360deg; } }

/* plastic reflections over everything */
.plastic {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background:
    radial-gradient(circle at var(--mx, 22%) var(--my, 12%), rgba(255, 255, 255, .16), transparent 38%),
    linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 18%, transparent 26%, transparent 64%, rgba(255, 255, 255, .07) 70%, transparent 76%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18), inset -1px 0 0 rgba(255, 255, 255, .08);
}

/* ---------- case label (front) ---------- */
.label {
  position: relative;
  min-height: 24.6cqw;            /* same height front & back so the card never shifts in the case */
  display: flex; align-items: stretch; gap: 3cqw;
  padding: 2.8cqw 3.4cqw;
  border-radius: 1.2cqw;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 40%),
    linear-gradient(180deg, #16131b, #0b0a0e);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 106, .55), inset 0 0 0 2.5px #0b0a0e, inset 0 0 0 3px rgba(212, 175, 106, .22);
  color: var(--text);
}
.label-l { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .9cqw; }
.label-set, .label-brand { font-family: var(--sans); font-weight: 700; font-size: 2.3cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-name { font-family: var(--serif); font-weight: 600; font-size: var(--lfs, 5.4cqw); line-height: 1.05; color: #fbf6ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-meta { display: flex; align-items: center; gap: 2cqw; font-family: var(--sans); font-weight: 700; font-size: 2.7cqw; letter-spacing: .14em; color: #cfc6b4; }
.label-r {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-left: 3cqw; border-left: 1px solid rgba(212, 175, 106, .35); text-align: center;
}
.label-r .label-brand { font-size: 1.9cqw; letter-spacing: .16em; }
.grade-word { font-family: var(--sans); font-weight: 800; font-size: 2.3cqw; letter-spacing: .14em; text-transform: uppercase; color: #efe6d2; margin-top: .6cqw; }
.grade-num {
  font-family: var(--serif); font-weight: 600; font-size: 10cqw; line-height: .95;
  background: var(--foil-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grade-sym { width: 8cqw; height: 8cqw; }

/* foil-stamped serial: 1/1 */
.serial {
  display: inline-block;
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: 3.6cqw; line-height: 1; letter-spacing: .04em;
  padding: .5cqw 1.6cqw .7cqw;
  border-radius: 1cqw;
  color: #1a1206;
  background: var(--foil-gold);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(0, 0, 0, .6), 0 0 10px rgba(246, 231, 191, .25);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

/* ---------- card well + card ---------- */
.well { position: relative; }
.card {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 5 / 7;
  border-radius: 4.6cqw;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 6px 14px rgba(0, 0, 0, .45);
}
.frame {
  position: absolute; inset: 0;
  padding: 3.4cqw;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, var(--m4) 0%, var(--m2) 16%, var(--m1) 30%, var(--m3) 38%, var(--m2) 52%, var(--m4) 66%, var(--m1) 82%, var(--m2) 100%);
}
.foil { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.foil::before {
  content: ""; position: absolute; left: 0; top: 0; width: 300%; height: 300%;
  background: var(--oil);
  transform: translate(calc(var(--px, .38) * -66.66%), calc(var(--py, .3) * -66.66%));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.tcard.is-active .foil::before, .tcard.posed .foil::before { transition: transform .1s linear; }
.frame-foil { mix-blend-mode: color-dodge; opacity: var(--foil-frame); }
.tier-legendary .frame-foil { mix-blend-mode: hard-light; opacity: .55; }

.inner {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column; gap: 2.4cqw;
  padding: 2.6cqw;
  border-radius: 2.4cqw;
  background:
    radial-gradient(ellipse 90% 60% at 50% 35%, color-mix(in srgb, var(--c1) 26%, transparent), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 36%, rgba(255, 255, 255, .035) 0 5deg, transparent 5deg 10deg),
    #120720;
  box-shadow: inset 0 0 0 .6cqw rgba(0, 0, 0, .45), 0 0 0 .5cqw rgba(0, 0, 0, .25);
  color: #fff6e0;
}
/* glitter: rainbow sparkles masked out of the oil-slick gradient */
.sparkle { z-index: 0; border-radius: inherit; opacity: var(--spark); mix-blend-mode: screen; }
.sparkle::before {
  -webkit-mask: var(--sparkle) 0 0 / 34cqw repeat; mask: var(--sparkle) 0 0 / 34cqw repeat;
}
.sparkle::after {
  content: ""; position: absolute; inset: 0;
  background: #fff;
  -webkit-mask: var(--sparkle) 11cqw 17cqw / 21cqw repeat; mask: var(--sparkle) 11cqw 17cqw / 21cqw repeat;
  opacity: .0;
}
.tier-ultra.in-view .sparkle::after, .tier-legendary.in-view .sparkle::after { animation: twinkle 2.6s ease-in-out infinite alternate; }
.tier-legendary .sparkle::after { opacity: .5; }
@keyframes twinkle { 0% { opacity: 0; } 100% { opacity: .75; } }
.inner > *:not(.foil) { position: relative; z-index: 1; }

/* name banner */
.banner {
  display: flex; align-items: center; gap: 2cqw;
  min-height: 12cqw;
  padding: 1.4cqw 2.4cqw 1.4cqw 3.2cqw;
  border-radius: 2cqw 2cqw 2cqw 2cqw;
  background: linear-gradient(180deg, #fffaf0, #f1e4c8);
  color: var(--ink);
  box-shadow: inset 0 -.6cqw 0 rgba(0, 0, 0, .12), 0 0 0 .5cqw var(--m2), 0 0 0 .8cqw rgba(0, 0, 0, .45);
}
.domain {
  flex: 1; min-width: 0; margin: 0;
  font-family: "Righteous", sans-serif; font-weight: 400;
  font-size: var(--fs, 7cqw); line-height: 1.05; white-space: nowrap;
  letter-spacing: -.005em;
}
.domain .tld { font-size: .72em; color: #b0106f; }
.sym { width: 7.2cqw; height: 7.2cqw; flex: none; overflow: visible; }
.sym, .sym-sm { fill: var(--tier); stroke: rgba(20, 8, 40, .85); stroke-width: 1.6; paint-order: stroke; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tier) 70%, transparent)); }
.banner .sym { stroke: #2a1540; }
.tier-common .banner .sym { fill: #8e98a4; }
.sym-sm { width: 1em; height: 1em; flex: none; vertical-align: -.12em; }

/* art window */
.art {
  flex: 1; min-height: 0;
  position: relative; overflow: hidden;
  border-radius: 1.6cqw;
  display: grid; place-items: center;
  box-shadow: 0 0 0 .7cqw var(--m2), 0 0 0 1.1cqw rgba(0, 0, 0, .5), inset 0 0 3cqw rgba(0, 0, 0, .45);
}
.art-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c2) 70%, #fff) 0%, transparent 42%),
    repeating-conic-gradient(from 0deg at 50% 50%, var(--c1) 0 7.5deg, color-mix(in srgb, var(--c2) 80%, #000) 7.5deg 15deg);
  filter: saturate(1.1);
}
.art-foil { mix-blend-mode: overlay; opacity: var(--foil-art); }
.art-foil::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-55deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 4px);
}
.art-spark { z-index: 2; mix-blend-mode: screen; opacity: var(--art-spark); }
.art-spark::before {
  -webkit-mask: var(--sparkle) 0 0 / 30cqw repeat; mask: var(--sparkle) 0 0 / 30cqw repeat;
}
/* prismatic light band that slides across the art as the card tilts */
.art-beam { z-index: 2; mix-blend-mode: color-dodge; opacity: calc(var(--foil-art) * .75); }
.art-beam::before {
  -webkit-mask: linear-gradient(115deg, transparent 38%, #000 47%, #000 53%, transparent 62%);
          mask: linear-gradient(115deg, transparent 38%, #000 47%, #000 53%, transparent 62%);
  filter: saturate(1.4);
}
.tier-common .art-beam { opacity: .18; }
.tier-legendary.in-view .art-foil::before { animation: prism 9s ease-in-out infinite alternate; }
@keyframes prism { to { translate: -22% -14%; } }
.logo { position: relative; width: 62%; height: auto; max-height: 88%; overflow: visible; filter: drop-shadow(0 2cqw 2.4cqw rgba(0, 0, 0, .5)); }
.logo text { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.logo .spin { transform-origin: 60px 60px; transition: transform 1.2s cubic-bezier(.5, 1.6, .4, 1); }
.tcard:hover .logo .spin { transform: rotate(40deg); }

.art-serial { position: absolute; z-index: 3; top: 2.6cqw; left: 2.6cqw; }
.art-serial .serial {
  font-size: 5.6cqw; padding: .6cqw 2.2cqw 1cqw; border-radius: 1.2cqw;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 .5cqw #1a1206, 0 1cqw 2cqw rgba(0, 0, 0, .45);
}

.seal {
  position: absolute; z-index: 3; right: 1.6cqw; bottom: 1.6cqw;
  width: 25cqw; height: 25cqw; rotate: -12deg;
  filter: drop-shadow(0 1cqw 1.2cqw rgba(0, 0, 0, .55));
}
.seal-ring { font-family: var(--sans); font-weight: 800; font-size: 7.6px; letter-spacing: 1.15px; fill: #f7dc8b; }
.seal-est { font-family: var(--sans); font-weight: 800; font-size: 8px; letter-spacing: 1.5px; fill: #f7dc8b; text-anchor: middle; }
.seal-year { font-family: "Righteous", sans-serif; font-size: 17px; fill: #fff4cf; text-anchor: middle; }

.sample-wm {
  position: absolute; inset: auto 0 auto 0; top: 42%;
  text-align: center; rotate: -24deg;
  font-family: "Righteous", sans-serif; font-size: 14cqw; letter-spacing: .12em;
  color: transparent; -webkit-text-stroke: .35cqw rgba(255, 255, 255, .75);
  pointer-events: none;
}

/* tagline ribbon (retro script) */
.ribbon {
  margin: -5.6cqw 3cqw 0; text-align: center;
  z-index: 2;
}
.ribbon span {
  display: inline-block; max-width: 100%;
  font-family: "Shrikhand", cursive; font-size: var(--tfs, 5.1cqw); line-height: 1.15;
  padding: 1.3cqw 5.5cqw 1.7cqw;
  color: var(--ink);
  background: linear-gradient(180deg, #fffaf0, #efdfbd);
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
  filter: drop-shadow(0 .5cqw 0 rgba(0, 0, 0, .35));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ribbon.wrap span { white-space: normal; text-wrap: balance; padding: 1.2cqw 6.5cqw 1.5cqw; line-height: 1.08; }

/* stats box */
.stats {
  display: grid; grid-template-columns: .8fr .8fr 1.1fr 1.3fr;
  margin: 0; border-radius: 1.6cqw; overflow: hidden;
  background: linear-gradient(180deg, #fffaf0, #f3e7cc);
  color: var(--ink);
  box-shadow: 0 0 0 .5cqw var(--m2), 0 0 0 .8cqw rgba(0, 0, 0, .45);
}
.stats div { padding: 1.5cqw 1cqw 1.6cqw; text-align: center; min-width: 0; }
.stats div + div { border-left: 1px solid rgba(26, 9, 51, .18); }
.stats dt { font-family: var(--sans); font-weight: 800; font-size: 2.15cqw; letter-spacing: .12em; text-transform: uppercase; color: #7a6a8e; white-space: nowrap; }
.stats dd { margin: .5cqw 0 0; font-family: "Righteous", sans-serif; font-size: 3.9cqw; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* footer strip */
.foot {
  display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
  font-family: var(--sans); font-weight: 700; font-size: 2.35cqw; letter-spacing: .1em; text-transform: uppercase;
  color: #f1e6cf; padding: 0 .6cqw;
}
.foot .num { font-weight: 800; color: #fff; }
.foot .num i { font-style: normal; opacity: .6; }
.foot .set { flex: 1; text-align: center; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .06em; }
.foot .tier-name { display: inline-flex; align-items: center; gap: 1cqw; color: var(--tier); white-space: nowrap; }
.tier-common .foot .tier-name { color: #d7dde3; }

/* moving light on the card surface */
.glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(farthest-corner circle at var(--mx, 30%) var(--my, 18%), rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .1) 28%, rgba(0, 0, 0, .22) 95%);
  mix-blend-mode: overlay;
  opacity: .55;
  transition: opacity .3s;
}
.tcard.is-active .glare { opacity: .9; }
.back .glare { background: radial-gradient(farthest-corner circle at var(--mxb, 70%) var(--my, 18%), rgba(255, 255, 255, .35) 0%, transparent 40%, rgba(0, 0, 0, .12) 95%); opacity: .6; }

/* the occasional shine sweep */
.shine { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; mix-blend-mode: overlay; border-radius: inherit; }
.shine::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85) 50%, transparent);
  transform: translateX(-120%) skewX(-14deg);
}
.tcard.in-view .shine::before { animation: sweep 8s ease-in-out infinite; animation-delay: calc(2.4s + var(--i) * 1.3s); }
@keyframes sweep { 0% { transform: translateX(-120%) skewX(-14deg); } 14%, 100% { transform: translateX(460%) skewX(-14deg); } }

/* invisible full-card button (keyboard + screen reader friendly flip) */
.flip-hit { position: absolute; inset: 0; z-index: 6; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 3.6cqw; }

/* SAMPLE sticker on the plastic */
.sample-badge {
  position: absolute; z-index: 8; top: 24%; right: -3%;
  transform: translateZ(8px) rotate(9deg);
  font-family: var(--sans); font-weight: 800; font-size: 3.2cqw; letter-spacing: .28em;
  color: #fff; background: #d6204f;
  padding: 1.3cqw 2.6cqw 1.3cqw 3cqw; border-radius: .8cqw;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .35);
  pointer-events: none;
}

/* ---------- case back ---------- */
.label-back {
  flex-direction: column; align-items: center; justify-content: center; gap: 1.3cqw;
  padding: 2.6cqw 3.4cqw 2.4cqw; text-align: center;
}
.label-back .btn-offer { width: 100%; padding: 2.5cqw 2cqw; font-size: 3.1cqw; }
.label-back-bonus { font-size: 2.4cqw; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); white-space: nowrap; }
.btn-offer {
  color: #16110a; border: 1px solid #f6e7bf; background: var(--foil-gold);
  position: relative; z-index: 7;
}
.btn-offer:hover, .btn-offer:focus-visible { box-shadow: 0 0 22px rgba(246, 231, 191, .45); }
.label-back-serial { display: flex; align-items: center; gap: 1.6cqw; font-size: 2.2cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.label-back-serial .serial { font-size: 3cqw; }
.back-small { font-size: 2.5cqw; color: var(--muted); letter-spacing: .04em; overflow-wrap: anywhere; }
.holo-sticker {
  position: absolute; right: 2.4cqw; top: 2.4cqw; width: 6cqw; height: 6cqw; border-radius: 50%;
  background: conic-gradient(#ff6fb5, #ffb36b, #f7f36e, #6ff5c4, #5fc3ff, #a98bff, #ff6fb5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); opacity: .8;
}

/* ---------- card back: CLASSIFIED dossier ---------- */
.card-back .frame {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, var(--m4), var(--m2) 30%, var(--m1) 50%, var(--m2) 70%, var(--m4));
}
.back-inner {
  gap: 1.6cqw; padding: 3.6cqw 4.2cqw 3cqw;
  font-family: "Special Elite", "Courier New", monospace;
  color: #2b2118;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, .35), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(120, 80, 20, .18), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 5.2cqw, rgba(60, 90, 140, .09) 5.2cqw calc(5.2cqw + 1px)),
    #e6d3a6;
  box-shadow: inset 0 0 6cqw rgba(110, 70, 10, .25), inset 0 0 0 .6cqw rgba(0, 0, 0, .25);
  overflow: hidden;
}
.dossier-head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid #2b2118; padding-bottom: 1.4cqw; }
.dossier-tab {
  font-family: var(--sans); font-weight: 800; font-size: 3cqw; letter-spacing: .3em; text-transform: uppercase;
  color: #efe3c4; background: #2b2118; padding: 1cqw 2.4cqw; border-radius: 1cqw 1cqw 0 0; margin-bottom: -1.4cqw;
}
.dossier-file { font-size: 3.6cqw; }
.dossier-file small { font-size: .75em; opacity: .65; }
.dossier-foot { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.stamp {
  flex: none;
  font-family: var(--sans); font-weight: 800; font-size: 4.4cqw; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(190, 20, 40, .82); border: .7cqw solid currentColor; border-radius: 1.2cqw;
  padding: .6cqw 2cqw; rotate: -12deg;
  -webkit-mask: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, .75) 80%);
  mix-blend-mode: multiply; pointer-events: none;
}
.back-sample {
  margin: 0; font-family: var(--sans); font-weight: 800; font-size: 2.5cqw; letter-spacing: .1em;
  color: #fff; background: #d6204f; padding: 1cqw 2cqw; border-radius: .8cqw; text-align: center;
}
.dossier { margin: 0; display: grid; gap: .9cqw; }
.dossier div { display: grid; grid-template-columns: 19cqw 1fr; align-items: baseline; gap: 1.5cqw; }
.dossier dt { font-family: var(--sans); font-weight: 800; font-size: 2.3cqw; letter-spacing: .18em; text-transform: uppercase; color: #7a5a2c; }
.dossier dd { margin: 0; font-size: 3.5cqw; line-height: 1.22; overflow-wrap: anywhere; }
.dossier .subject { font-size: 4.2cqw; white-space: nowrap; overflow-wrap: normal; }
.briefing h4, .intel h4 {
  margin: 0 0 .8cqw; font-family: var(--sans); font-weight: 800; font-size: 2.3cqw; letter-spacing: .18em; text-transform: uppercase; color: #7a5a2c;
}
.briefing p, .intel p { margin: 0; font-size: 3.4cqw; line-height: 1.34; }
.intel { padding: 1.4cqw 2.2cqw; background: rgba(255, 250, 235, .55); border-left: 1cqw solid #b8912f; border-radius: .6cqw; }
.redacted {
  flex: 1 1 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 1.8cqw;
}
.redacted i { display: block; height: 3cqw; flex: none; background: #1d1712; border-radius: .4cqw; opacity: .88; }
.redacted span { font-family: var(--sans); font-weight: 800; font-size: 2cqw; letter-spacing: .2em; text-transform: uppercase; color: #8a6d45; flex: none; }
.statline { width: 100%; border-collapse: collapse; position: relative; font-size: 3.3cqw; text-align: center; }
.statline th { font-family: var(--sans); font-weight: 800; font-size: 2.1cqw; letter-spacing: .14em; text-transform: uppercase; color: #efe3c4; background: #2b2118; padding: 1cqw .6cqw; }
.statline td { padding: 1.2cqw .6cqw; border-bottom: 1px dashed rgba(43, 33, 24, .5); white-space: nowrap; }
.jamhot {
  rotate: -8deg; line-height: 1; white-space: nowrap;
  font-family: "Shrikhand", cursive; font-size: 4.2cqw;
  background: var(--oil); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .15cqw rgba(60, 30, 0, .35);
  opacity: .9; pointer-events: none;
}
.flip-back {
  cursor: pointer; flex: none;
  font-family: var(--sans); font-weight: 800; font-size: 2.5cqw; letter-spacing: .2em; text-transform: uppercase;
  color: #2b2118; background: none; border: 1px solid rgba(43, 33, 24, .45); border-radius: 99px;
  padding: 1.1cqw 3.4cqw;
}

/* ---------- pack-opening reveal: cards deal in face-down, then flip up ---------- */
.tcard:not(.dealt) .deal { visibility: hidden; }
.tcard.dealt .deal { animation: deal 1.05s cubic-bezier(.2, .9, .25, 1) backwards; animation-delay: var(--deal-delay, .2s); }
@keyframes deal {
  0%   { opacity: 0; transform: translate3d(0, -90px, 180px) rotateZ(-10deg) rotateY(180deg); }
  45%  { opacity: 1; transform: translate3d(0, 0, 0) rotateZ(0) rotateY(180deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0deg); }
}

/* ---------- footer ---------- */
.footer {
  text-align: center; padding: 3.5rem 1.5rem 3.5rem;
  color: var(--muted); font-size: .85rem; letter-spacing: .04em;
}
.footer p { margin: .45rem 0; }
.footer-icon { width: 34px; height: 34px; color: var(--gold); opacity: .85; margin-bottom: .8rem; }
.footer-big { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--gold-hi); letter-spacing: 0; }
.jamhot-egg {
  font-family: "Shrikhand", cursive; font-size: 1.1rem; letter-spacing: .02em;
  background: var(--oil); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transition: opacity 1s;
}
body.jam-hot .jamhot-egg { opacity: 1; animation: oilshift 6s linear infinite; }
@keyframes oilshift { to { background-position: 300% 0; } }
.nowrap { white-space: nowrap; }

/* ---------- phones ---------- */
@media (max-width: 560px) {
  .eyebrow { letter-spacing: .16em; font-size: .62rem; }
  .hero-cta .btn { width: 100%; max-width: 320px; }
  .grid { gap: 3rem; }
  .tcard { max-width: 360px; }
  .ambient { animation: none; }            /* keep phones cool: glow drifts but no hue filter */
}

/* ---------- reduced motion: no tilt, no dealing, no sweeps; light still follows your finger ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
  html { scroll-behavior: auto; }
  .tcard { rotate: 0deg; }
  .tcard.is-active .tilt { transform: none; }
}

/* ---------- bonus domain chip (e.g. + thewindfucker.com) ---------- */
.art-bonus {
  position: absolute; z-index: 3; top: 2.6cqw; right: 2.6cqw; max-width: 62%;
  display: flex; flex-direction: column; align-items: flex-end; gap: .3cqw;
  padding: 1.1cqw 2cqw 1.3cqw; border-radius: 1.2cqw;
  background: rgba(12, 8, 16, .84);
  box-shadow: inset 0 0 0 1px rgba(246, 231, 191, .7), 0 1cqw 2cqw rgba(0, 0, 0, .4);
  font-family: var(--sans); font-weight: 700; font-size: 2.9cqw; line-height: 1.1; color: #fff; white-space: nowrap;
}
.art-bonus b { font-weight: 800; font-size: 2cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* =====================================================================
   AFTER DARK (18+): a velvet-rope room at the end of the table
   ===================================================================== */
.after-dark { position: relative; margin-top: clamp(5rem, 10vw, 8rem); padding: clamp(3.5rem, 7vw, 5rem) 0 1rem; }
.after-dark[hidden] { display: none; }
.after-dark::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: -7rem; left: -50vw; right: -50vw;
  background:
    radial-gradient(ellipse 55% 60% at 50% 0%, rgba(150, 12, 36, .38), transparent 72%),
    radial-gradient(ellipse 120% 80% at 50% 60%, transparent 40%, rgba(0, 0, 0, .7)),
    linear-gradient(180deg, #14050a 0%, #0c0306 55%, #07060a 100%);
  border-top: 1px solid rgba(214, 60, 84, .45);
}
.ad-head { text-align: center; max-width: 620px; margin: 0 auto; }
.ad-head .eyebrow { color: #e46a7d; margin-bottom: 1rem; }
.ad-head h2 {
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(2.3rem, 5vw, 3.4rem);
  margin: 0 0 1rem; line-height: 1.05; color: #f6dde0;
}
.ad-head .sub { margin: 0 0 2rem; color: #b99aa0; line-height: 1.6; }
.btn-ad { color: #ffdfe4; background: rgba(110, 0, 22, .35); border: 1px solid rgba(228, 106, 125, .6); }
.btn-ad:hover, .btn-ad:focus-visible { background: rgba(150, 10, 36, .5); border-color: #e46a7d; box-shadow: 0 0 28px rgba(200, 30, 60, .35); }
.ad-grid { margin-top: clamp(3rem, 6vw, 4.5rem); }
.ad-grid[hidden] { display: none; }
.tcard.is-ad { --glow: rgba(210, 24, 60, .32); }
.chip-ad { color: #e46a7d; margin-left: .4rem; }
.chip-ad::before { content: ""; display: inline-block; width: 1px; height: .9em; background: rgba(228, 106, 125, .5); margin-right: 1.4rem; vertical-align: -.1em; }
.chip-ad:hover { color: #ff9aaa; }