/* ============================================================
   H7V ARCADE — MASTER STYLESHEET (REV 2: GAME MODE)
   Loud comic-book / graffiti / electric-glitch ARCADE theme.
   Owns: tokens, layout, HUD nav, title-screen hero,
   collectible-card listino, città, level-select contatti,
   footer, reveal/pop motion base, global tactile press states.
   Does NOT style: #fx, .scanlines, .halftone, .vignette (fx.css),
   #gate / #pow / #gate-fx (gate.css), #trail internals (motion.js).
   ============================================================ */

/* ---------- FONTS (self-hosted, verbatim) ---------- */
@font-face{font-family:'Bangers';src:url('../assets/fonts/bangers.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../assets/fonts/archivo.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../assets/fonts/jbmono.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}

/* ---------- DESIGN TOKENS ---------- */
:root{
  --bg:#0a0a12; --bg2:#0e0e1a; --panel:#14131f; --panel2:#1b1930; --line:#2a2747;
  --ink:#f6f7ff; --ink-dim:#bcc0db; --ink-mute:#7d83a3; --ink-on:#0a0a12;
  --cyan:#00e5ff; --cyan-2:#22b8ff; --yellow:#ffe000; --it-green:#2bd35a; --it-red:#e23636; --ma-red:#c1272d;
  --tg:#229ED9; --ol:#05060a;            /* comic outline (near-black) */
  --radius:16px;
  --f-display:'Bangers', system-ui, sans-serif;          /* headlines, chunky comic */
  --f-body:'Archivo', system-ui, sans-serif;             /* body, variable 100-900 */
  --f-mono:'JetBrains Mono', ui-monospace, monospace;    /* kickers, labels, prices */

  --halftone:radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.4px) 0 0/10px 10px;
  --sticker-sh:6px 6px 0 var(--ol);
  --sticker-sh-sm:4px 4px 0 var(--ol);
  --sticker-sh-lg:9px 9px 0 var(--ol);
  --wrap:1180px;

  /* collectible-card rarity palette */
  --rar-leg:#ffcb1f;   /* leggendario — gold/holo */
  --rar-epi:#b15cff;   /* epico — purple→cyan */
  --rar-rar:#2b7bff;   /* raro — blue */
  --rar-com:#2bd35a;   /* comune — green */
}

/* ---------- GLOBAL RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}               /* clip (not hidden) so sticky still works */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.55;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.locked{overflow:hidden;height:100vh}

img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
b,strong{font-weight:800}
em{font-style:italic}
::selection{background:var(--cyan);color:var(--ink-on)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* ---------- GLOBAL GAME-FEEL (tactile press everywhere) ---------- */
a,button,.card,.qty-chip,.grade-tab,.city-chip,.ch-row,.ch-copy{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
/* universal press juice — bouncy hover, snappy active (per-component rules may override) */
.btn,.nav-cta,.card-cta,.qty-chip,.grade-tab,.ch-copy,.city-chip,.nav-links a{
  transition:transform .14s cubic-bezier(.2,.9,.2,1.4), box-shadow .14s ease, filter .2s ease, background .2s ease, color .2s ease;
}

/* ---------- LAYERING: content above #fx (z0) + overlays (z0) ---------- */
.nav,.hero,.intro-copy,.marq,.listino,.citta,.contact,.foot{
  position:relative;
  z-index:1;
}
/* structural safety: no section can paint behind the z0 overlays */
body>section,body>header,body>nav,body>footer{ position:relative; z-index:1; }

/* ---------- SHARED LAYOUT ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(1rem,5vw,2.4rem);
}
section{ padding-block:clamp(3.4rem,8vw,6rem); }

/* ---------- SHARED TYPE BITS ---------- */
.kicker,.eyebrow,.cat-label{
  font-family:var(--f-mono);
  font-weight:700;
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.kicker{
  display:inline-block;
  color:var(--ink-on);
  background:var(--yellow);
  border:2.5px solid var(--ol);
  border-radius:999px;
  padding:.32em .9em;
  box-shadow:var(--sticker-sh-sm);
  transform:rotate(-1.5deg);
  margin-bottom:1rem;
}

/* Section headers */
.sec-head{ margin-bottom:clamp(1.6rem,4vw,2.6rem); }
.sec-head p{
  color:var(--ink-dim);
  max-width:60ch;
  font-size:1rem;
  margin-top:.5rem;
}

/* Display headline ".pop" (starburst-ready) */
.pop{
  position:relative;
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2.4rem,6.5vw,4.6rem);
  line-height:.92;
  letter-spacing:1.5px;
  color:var(--ink);
  -webkit-text-stroke:2px var(--ol);
  text-shadow:4px 4px 0 var(--ol);
  z-index:0;
}
.pop em{ color:var(--cyan); font-style:normal; -webkit-text-stroke:2px var(--ol); }
.pop::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:50%; left:-2.2rem;
  width:7rem; height:7rem;
  transform:translateY(-50%) scale(.3) rotate(-10deg);
  opacity:0;
  background:
    repeating-conic-gradient(from 0deg, var(--yellow) 0deg 9deg, transparent 9deg 18deg);
  -webkit-mask:radial-gradient(circle, #000 38%, transparent 64%);
          mask:radial-gradient(circle, #000 38%, transparent 64%);
  pointer-events:none;
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.9,.2,1);
}
.pop.in::before{ opacity:.9; transform:translateY(-50%) scale(1) rotate(0deg); }
.pop.in{ animation:popslam .55s cubic-bezier(.18,.9,.25,1.2) both; }

/* ---------- REVEAL SYSTEM (MOTION toggles .in) ---------- */
/* NOTE: no persistent will-change here — it pinned a GPU layer on every .reveal
   (50+ on the page) and that VRAM pressure helped trigger WebGL context loss on
   phones. The .in transition composites fine without it. */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.d1{transition-delay:.06s} .d2{transition-delay:.12s} .d3{transition-delay:.18s}
.d4{transition-delay:.24s} .d5{transition-delay:.30s} .d6{transition-delay:.36s}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem clamp(1rem,4vw,2rem);
  background:rgba(10,10,18,.66);
  -webkit-backdrop-filter:blur(9px) saturate(1.2);
          backdrop-filter:blur(9px) saturate(1.2);
  border-bottom:3px solid var(--ol);
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease, opacity .4s ease;
}
/* HUD: faint CRT scanline texture + arcade accent line */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  opacity:.6;
}
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; pointer-events:none;
  background:repeating-linear-gradient(90deg, var(--cyan) 0 14px, var(--yellow) 14px 28px);
  opacity:0; transition:opacity .3s ease;
}
.nav.scrolled{
  background:rgba(8,8,16,.93);
  padding-top:.45rem; padding-bottom:.45rem;
  box-shadow:0 5px 0 var(--ol), 0 16px 30px -18px #000;
}
.nav.scrolled::after{ opacity:.9; }
body.locked .nav{ opacity:0; pointer-events:none; }

.nav-brand{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.nav-mark{
  display:grid; place-items:center;
  width:34px; height:34px; flex:0 0 auto;
  border:2.5px solid var(--ol); border-radius:9px;
  background:var(--panel2); overflow:hidden;
  box-shadow:var(--sticker-sh-sm);
  transform:rotate(-2deg);
}
.nav-mark img{ width:100%; height:100%; object-fit:cover; }
.nav-name{
  font-family:var(--f-display); font-size:1.35rem; letter-spacing:1px;
  color:var(--ink); -webkit-text-stroke:.6px var(--ol);
  white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.nav-name b{ color:var(--cyan); }

.nav-links{ display:flex; align-items:center; gap:.3rem; }
.nav-links a{
  font-family:var(--f-mono); font-weight:600; font-size:.82rem;
  letter-spacing:.06em; color:var(--ink-dim);
  padding:.45em .7em; border-radius:8px; position:relative;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
  transition:color .2s ease, background .2s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:.7em; right:.7em; bottom:.28em;
  height:2.5px; background:var(--cyan); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a:active{ transform:scale(.92); color:var(--cyan); }

.nav-cta{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-mono); font-weight:700; font-size:.82rem; letter-spacing:.04em;
  color:#fff; background:var(--tg);
  border:2.5px solid var(--ol); border-radius:999px;
  padding:.5em 1.05em; flex:0 0 auto;
  box-shadow:var(--sticker-sh-sm);
  transition:transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.nav-cta .tg-dot{
  width:.55em; height:.55em; border-radius:50%;
  background:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.35);
  animation:tgpulse 1.8s ease-in-out infinite;
}
.nav-cta:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ol); filter:brightness(1.08); }
.nav-cta:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ol); }

/* ============================================================
   HERO — ARCADE TITLE SCREEN (animated real-logo centerpiece)
   ~100vh. The global #fx electric storm shows through;
   .hero-grade is a soft vignette so the logo pops.
   ============================================================ */
.hero{
  position:relative; z-index:1;
  min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(5.5rem,14vh,9rem) 0 clamp(2.6rem,7vh,4.5rem);
  perspective:1100px;                 /* hero.js 3D-tilts .hero-logo */
  overflow:clip;
}
.hero-grade{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(78% 56% at 50% 44%, transparent 34%, rgba(5,6,10,.62) 100%),
    linear-gradient(180deg, rgba(5,6,10,.5) 0%, transparent 24%, transparent 62%, rgba(5,6,10,.92) 100%);
}
.hero-content{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(.95rem,2.6vw,1.5rem);
  width:100%; max-width:780px; text-align:center;
  padding-inline:clamp(1rem,5vw,2.4rem);
}

/* eyebrow sticker */
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-mono); font-weight:700; font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-on); background:var(--cyan);
  border:3px solid var(--ol); border-radius:999px;
  padding:.5em 1.05em; box-shadow:var(--sticker-sh-sm);
  transform:rotate(-1.5deg);
}
.eyebrow-dot{
  width:.6em; height:.6em; border-radius:50%;
  background:var(--it-red); box-shadow:0 0 0 2px var(--ol);
  animation:tgpulse 1.6s ease-in-out infinite;
}

/* CENTERPIECE — animated real logo. The clip's PURE BLACK bg melts
   into the dark page via screen blend; electric glow halo + starburst,
   NO visible panel/box behind it. .hero-logo is 3D-tilted by hero.js. */
.hero-logo{
  position:relative; z-index:1;
  width:clamp(280px,88vw,620px);
  aspect-ratio:4 / 3;
  transform-style:preserve-3d;
  transform:translateZ(0);
}
.hero-logo-burst{
  position:absolute; inset:-16%; z-index:0; pointer-events:none;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,224,0,.18) 0deg 6deg, transparent 6deg 13deg),
    radial-gradient(closest-side, rgba(0,229,255,.30), rgba(0,229,255,.06) 55%, transparent 72%);
  -webkit-mask:radial-gradient(closest-side, #000 60%, transparent 80%);
          mask:radial-gradient(closest-side, #000 60%, transparent 80%);
  animation:burstspin 26s linear infinite, glowpulse 3.6s ease-in-out infinite;
}
.hero-logo-vid,.hero-logo-fallback{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  mix-blend-mode:screen;            /* drops the pure-black clip bg into the page */
}
.hero-logo-fallback{ z-index:1; }
.hero-logo-vid{ z-index:2; }

/* sub / lead */
.hero-sub{
  font-family:var(--f-mono); font-weight:700; letter-spacing:.34em;
  font-size:clamp(.8rem,2.6vw,1.1rem); text-transform:uppercase;
  color:var(--cyan); text-shadow:0 0 18px rgba(0,229,255,.5);
}
.hero-lead{
  max-width:54ch; color:var(--ink-dim);
  font-size:clamp(.96rem,2.1vw,1.12rem);
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:.3rem; }

/* blinking arcade scroll cue */
.hero-scrollcue{
  margin-top:.4rem;
  font-family:var(--f-mono); font-weight:700; letter-spacing:.2em;
  font-size:.76rem; text-transform:uppercase; color:var(--yellow);
  text-shadow:0 0 12px rgba(255,224,0,.5);
  animation:blink 1.2s steps(1,end) infinite, bob 1.8s ease-in-out infinite;
}

/* ---------- COMIC BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-mono); font-weight:800; font-size:.92rem; letter-spacing:.04em;
  text-transform:uppercase;
  padding:.9em 1.6em; border-radius:12px;
  border:3.5px solid var(--ol); box-shadow:var(--sticker-sh);
  transition:transform .14s cubic-bezier(.2,.9,.2,1.4), box-shadow .14s ease, filter .2s ease;
}
.btn:hover{ transform:translate(-2px,-2px) rotate(-.5deg); box-shadow:8px 8px 0 var(--ol); }
.btn:active{ transform:translate(2px,2px) scale(.96); box-shadow:3px 3px 0 var(--ol); }
.btn-tg{ background:var(--tg); color:#fff; }
.btn-tg:hover{ filter:brightness(1.1) saturate(1.1); box-shadow:8px 8px 0 var(--ol), 0 0 22px -4px var(--tg); }
.btn-ghost{ background:var(--yellow); color:var(--ink-on); }
.btn-ghost:hover{ box-shadow:8px 8px 0 var(--ol), 0 0 22px -4px var(--yellow); }

/* ============================================================
   INTRO COPY (static, post-scrub)
   ============================================================ */
.intro-copy{ text-align:center; }
.intro-copy .wrap{ max-width:880px; }
.intro-copy p{ color:var(--ink-dim); max-width:62ch; margin:1rem auto 0; font-size:1.05rem; }

/* stats strip */
.strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  margin-top:clamp(2rem,5vw,3rem);
}
.stat{
  background:var(--panel);
  border:3px solid var(--ol); border-radius:14px;
  box-shadow:var(--sticker-sh-sm);
  padding:1.1rem .6rem; position:relative; overflow:hidden;
}
.stat::after{ content:""; position:absolute; inset:0; background:var(--halftone); opacity:.5; pointer-events:none; }
.stat:nth-child(1){ border-top:6px solid var(--cyan); }
.stat:nth-child(2){ border-top:6px solid var(--yellow); }
.stat:nth-child(3){ border-top:6px solid var(--it-green); }
.stat:nth-child(4){ border-top:6px solid var(--it-red); }
.stat-n{
  display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.2rem,6vw,3.4rem); line-height:1;
  color:var(--ink); -webkit-text-stroke:1.5px var(--ol); text-shadow:3px 3px 0 var(--ol);
}
.stat-l{
  display:block; margin-top:.4rem;
  font-family:var(--f-mono); font-weight:600; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
}

/* ============================================================
   MARQUEE — comic lightning band
   ============================================================ */
.marq{
  --marq-bg:var(--yellow);
  overflow:hidden; width:100%;
  background:var(--marq-bg);
  border-block:4px solid var(--ol);
  padding-block:.55rem;
  box-shadow:inset 0 0 0 999px transparent;
  transform:rotate(-1deg);
  margin-block:clamp(1.5rem,4vw,2.6rem);
}
.marq-track{
  display:flex; white-space:nowrap; width:max-content;
  animation:marq 32s linear infinite;
}
.marq-track span{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.4rem,3.4vw,2.2rem); letter-spacing:1.5px;
  color:var(--ink-on); -webkit-text-stroke:1.4px var(--ol);
  padding-right:1.2rem;
}

/* ============================================================
   LISTINO
   ============================================================ */
.cat-block{ margin-bottom:clamp(2.4rem,6vw,4rem); }
.cat-block:last-child{ margin-bottom:0; }
.cat-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.cat-label{
  flex:0 0 auto;
  color:var(--ink-on); background:var(--cyan);
  border:3px solid var(--ol); border-radius:10px;
  padding:.45em .9em; box-shadow:var(--sticker-sh-sm);
  transform:rotate(-1deg);
}
.cat-rule{
  flex:1 1 auto; height:6px; min-width:30px;
  border:3px solid var(--ol); border-radius:999px;
  background:
    repeating-linear-gradient(90deg, var(--yellow) 0 14px, var(--it-red) 14px 28px);
  box-shadow:var(--sticker-sh-sm);
}

.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,1.6rem);
  perspective:900px;            /* depth for listino.js card 3D-tilt */
}

/* ---------- CARD (collectible trading card) ---------- */
.card{
  --rar:var(--cyan);
  position:relative;
  display:flex; flex-direction:column;
  background:var(--panel);
  border:3.5px solid var(--ol); border-radius:var(--radius);
  box-shadow:var(--sticker-sh);
  overflow:hidden;
  cursor:pointer;
  transform-style:preserve-3d;        /* listino.js 3D-tilts the card */
  transition:transform .18s ease, box-shadow .18s ease, border-color .2s ease;
}
/* rarity tint — LISTINO sets data-rarity from max €/g */
.card[data-rarity="leggendario"]{ --rar:var(--rar-leg); }
.card[data-rarity="epico"]{ --rar:var(--rar-epi); }
.card[data-rarity="raro"]{ --rar:var(--rar-rar); }
.card[data-rarity="comune"]{ --rar:var(--rar-com); }
.card[data-rarity]{ border-color:var(--rar); box-shadow:var(--sticker-sh), 0 0 22px -5px var(--rar); }
.card:hover{
  transform:translate(-2px,-3px) rotate(-.2deg);
  box-shadow:8px 8px 0 var(--ol), 0 0 30px -5px var(--rar);
}
.card:active{ transform:translate(-1px,-1px) scale(.985); }
/* house products get an Italian-flag accent strip */
.card[data-house]::after{
  content:""; position:absolute; top:0; left:0; right:0; height:5px; z-index:6;
  background:linear-gradient(90deg, var(--it-green) 0 33%, #fff 33% 66%, var(--it-red) 66% 100%);
}

/* holographic shine — faint always-on sheen + sweep streak on hover/tap.
   LISTINO outputs a .card-shine element; it also moves under 3D tilt. */
.card-shine{
  position:absolute; inset:0; z-index:7; pointer-events:none;
  border-radius:inherit; overflow:hidden;
  opacity:.5; mix-blend-mode:screen;
  background:linear-gradient(135deg, rgba(255,0,128,.05), rgba(0,229,255,.06) 38%, rgba(255,224,0,.05) 68%, rgba(150,0,255,.06));
}
.card-shine::before{
  content:""; position:absolute; inset:-40%;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform:translateX(-130%) rotate(8deg);
  opacity:0;
}
.card:hover .card-shine::before,
.card:active .card-shine::before,
.card.is-tilt .card-shine::before{ opacity:1; animation:shinesweep 1s ease; }

/* media */
.card-media{
  position:relative;
  aspect-ratio:3 / 4;
  width:100%;
  overflow:hidden;
  background:radial-gradient(120% 120% at 50% 20%, var(--panel2), #0b0b16);
  border-bottom:3px solid var(--ol);
}
.card-media::before{ /* halftone hint */
  content:""; position:absolute; inset:0; z-index:2;
  background:var(--halftone); opacity:.35; pointer-events:none; mix-blend-mode:overlay;
}
.pvid{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.card:hover .pvid{ transform:scale(1.05); }
.card-ph{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center; text-align:center; padding:1rem;
  font-family:var(--f-mono); font-weight:600; font-size:.8rem;
  letter-spacing:.08em; text-transform:lowercase; color:var(--ink-mute);
}
.card-media.has-vid .card-ph{ display:none; }

.card-no,.card-brand{
  position:absolute; z-index:3;
  font-family:var(--f-mono); font-weight:700; letter-spacing:.06em;
  border:2.5px solid var(--ol); border-radius:8px;
  box-shadow:var(--sticker-sh-sm);
}
.card-no{
  top:.6rem; left:.6rem;
  font-size:.68rem; padding:.3em .55em;
  background:var(--yellow); color:var(--ink-on);
  transform:rotate(-3deg);
}
.card-brand{
  top:.6rem; right:.6rem; max-width:62%;
  font-size:.64rem; text-transform:uppercase; padding:.34em .6em;
  background:rgba(10,10,18,.82); color:var(--cyan);
  border-color:var(--cyan);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transform:rotate(1.5deg);
}
.card-badge{
  position:absolute; z-index:4;
  bottom:.7rem; left:.6rem;
  font-family:var(--f-display); font-size:1.05rem; letter-spacing:.5px;
  color:var(--ink-on); background:var(--it-red);
  border:2.5px solid var(--ol); border-radius:8px;
  padding:.1em .55em; box-shadow:var(--sticker-sh-sm);
  transform:rotate(-4deg);
  -webkit-text-stroke:.4px var(--ol);
}
/* new-entry sticker — distinct green pop vs the red "NEW PRICE" */
.card-badge-new{
  background:var(--it-green); color:var(--ol);
  -webkit-text-stroke:.4px var(--ol);
  animation:newpop 1.9s ease-in-out infinite;
}
@keyframes newpop{ 0%,100%{ transform:rotate(-4deg) scale(1); } 50%{ transform:rotate(-4deg) scale(1.09); } }

/* ============================================================
   PROMO — "omaggio" ribbon (highlighted, top of listino)
   ============================================================ */
.promo-omaggio{
  position:relative; display:flex; align-items:center; gap:1rem;
  margin:0 0 2rem; padding:1rem 1.15rem;
  background:
    repeating-linear-gradient(45deg, rgba(5,6,10,.12) 0 12px, transparent 12px 24px),
    linear-gradient(120deg, var(--yellow) 0%, #ffd84d 44%, var(--it-green) 100%);
  border:3px solid var(--ol); border-radius:14px;
  box-shadow:var(--sticker-sh), 0 0 0 1px rgba(0,229,255,.45), 0 10px 34px rgba(0,229,255,.18);
  transform:rotate(-.5deg); overflow:hidden;
}
.promo-omaggio::before{                       /* static holo sweep */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.5) 47%, transparent 61%);
  mix-blend-mode:screen; opacity:.5;
}
.promo-ico{
  flex:0 0 auto; font-size:2.4rem; line-height:1;
  filter:drop-shadow(2px 2px 0 var(--ol));
  animation:promopop 2.4s ease-in-out infinite;
}
@keyframes promopop{ 0%,100%{ transform:scale(1) rotate(-4deg); } 50%{ transform:scale(1.12) rotate(4deg); } }
.promo-body{ position:relative; z-index:1; display:flex; flex-direction:column; gap:.3rem; min-width:0; flex:1 1 auto; }
.promo-lead{
  display:flex; align-items:center; flex-wrap:wrap; gap:.16rem .45rem;
  font-family:var(--f-mono); font-weight:700; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ol);
}
.promo-lead b{                                   /* the 500€ figure — big boxed comic chip */
  font-family:var(--f-display); font-weight:400; letter-spacing:.5px; line-height:.86;
  font-size:clamp(1.7rem,4.4vw,2.35rem);
  color:var(--ma-red); background:#fff;
  border:3px solid var(--ol); border-radius:8px;
  padding:.04em .3em; box-shadow:var(--sticker-sh-sm);
  transform:rotate(-2.5deg); -webkit-text-stroke:.5px var(--ol);
}
.promo-main{
  font-family:var(--f-display); font-weight:400; letter-spacing:.5px; line-height:1.04;
  font-size:clamp(1.35rem,3.4vw,2rem); color:var(--ol); -webkit-text-stroke:.5px var(--ol);
}
.promo-main em{
  font-style:normal; color:#062a6b; background:var(--cyan);
  padding:0 .22em; border-radius:5px; box-shadow:2px 2px 0 var(--ol);
}
.promo-main b{ color:var(--ma-red); }
.promo-tag{
  position:relative; z-index:1; flex:0 0 auto; align-self:flex-start;
  font-family:var(--f-display); font-size:1rem; letter-spacing:.5px;
  color:var(--ol); background:#fff;
  border:2.5px solid var(--ol); border-radius:8px;
  padding:.12em .5em; box-shadow:var(--sticker-sh-sm);
  transform:rotate(4deg);
}

/* rarity ribbon (collectible label) */
.card-rarity{
  display:inline-flex; align-items:center;
  font-family:var(--f-display); font-size:.92rem; letter-spacing:.5px; line-height:1;
  color:var(--ink-on); background:var(--rar);
  border:2.5px solid var(--ol); border-radius:8px;
  padding:.18em .5em; box-shadow:var(--sticker-sh-sm);
  -webkit-text-stroke:.4px var(--ol);
  transform:rotate(2deg);
}
.card[data-rarity="leggendario"] .card-rarity{
  background:linear-gradient(135deg, var(--rar-leg), #fff6c2 45%, var(--rar-leg) 70%);
}
.card[data-rarity="epico"] .card-rarity{
  background:linear-gradient(135deg, var(--rar-epi), var(--cyan));
}
.card-media .card-rarity{ position:absolute; z-index:5; right:.6rem; bottom:.6rem; }

/* body */
.card-body{ display:flex; flex-direction:column; gap:.7rem; padding:1rem 1rem 1.1rem; flex:1 1 auto; }
.card-name{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.35rem,2.6vw,1.7rem); line-height:1; letter-spacing:.6px;
  color:var(--ink); -webkit-text-stroke:1px var(--ol);
}
.card-gen{
  font-family:var(--f-mono); font-weight:500; font-size:.72rem;
  letter-spacing:.02em; color:var(--ink-mute); line-height:1.5;
}

/* tier rows */
.card-tiers{
  display:flex; flex-direction:column;
  border:2.5px solid var(--ol); border-radius:10px; overflow:hidden;
  background:var(--bg2);
}
.tier{
  display:grid; grid-template-columns:1fr auto auto; align-items:baseline;
  column-gap:.45rem;
  font-family:var(--f-mono); font-size:.82rem;
  padding:.42em .7em;
}
.tier:nth-child(even){ background:rgba(255,255,255,.035); }
.tier + .tier{ border-top:1px solid var(--line); }
.tq{ color:var(--ink-dim); font-weight:600; letter-spacing:.02em; }
.tp{ color:var(--ink); font-weight:800; white-space:nowrap; }
.tpg{ color:var(--ink-mute); font-weight:500; font-size:.7rem; white-space:nowrap; text-align:right; }

.card-note,.card-bulk{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.02em;
  color:var(--ink-dim);
  background:var(--panel2); border:2px dashed var(--line); border-radius:8px;
  padding:.45em .65em;
}
.card-bulk b{ color:var(--cyan); }

/* CTA bar — arcade in-page button ("▶ CONTATTA PER ORDINARE") */
.card-cta{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  margin-top:auto; position:relative; z-index:8;
  font-family:var(--f-mono); font-weight:800; font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-on);
  background:linear-gradient(180deg, var(--cyan), var(--cyan-2));
  border-top:3.5px solid var(--ol);
  padding:.95em 1rem;
  transition:filter .15s ease, letter-spacing .2s ease, background .2s ease;
}
.card:hover .card-cta{ filter:brightness(1.08); letter-spacing:.1em; }
.card-cta:active{ filter:brightness(.9); }
.card-arrow{ flex:0 0 auto; transition:transform .2s ease; }
.card:hover .card-arrow{ transform:translate(2px,-2px); }

/* ---------- WPFF grade tabs ---------- */
.card-wpff .card-body{ gap:.85rem; }
.grade-tabs{
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.grade-tab{
  font-family:var(--f-mono); font-weight:700; font-size:.72rem; letter-spacing:.03em;
  color:var(--ink-dim); background:var(--panel2);
  border:2.5px solid var(--ol); border-radius:8px;
  padding:.35em .6em;
  box-shadow:2px 2px 0 var(--ol);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease, color .2s ease;
}
.grade-tab:hover{ color:var(--ink); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ol); }
.grade-tab.is-on{
  color:var(--ink-on); background:var(--cyan); border-color:var(--ol);
  transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ol);
}
.grade-panels{ position:relative; }
.grade-panel[hidden]{ display:none; }
.grade-panel{ animation:fadein .25s ease; }

/* ============================================================
   CITTÀ
   ============================================================ */
.citta-grid{
  display:flex; flex-wrap:wrap; gap:clamp(.7rem,2vw,1rem);
}
.city-chip{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--panel);
  border:3px solid var(--ol); border-radius:999px;
  padding:.55em 1.1em;
  box-shadow:var(--sticker-sh-sm);
  transform:rotate(-1deg);
  transition:transform .15s ease, box-shadow .15s ease;
}
.city-chip:nth-child(even){ transform:rotate(1.2deg); }
.city-chip:hover{ transform:translate(-2px,-2px) rotate(0deg); box-shadow:6px 6px 0 var(--ol); }
.city-chip:active{ transform:scale(.95) rotate(0deg); box-shadow:var(--sticker-sh-sm); }
.city-pin{ font-size:1.05em; line-height:1; filter:drop-shadow(1px 1px 0 var(--ol)); }
.city-name{
  font-family:var(--f-display); font-size:1.25rem; letter-spacing:.6px;
  color:var(--ink); -webkit-text-stroke:.6px var(--ol);
}
.city-tag{
  font-family:var(--f-mono); font-weight:700; font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-on); background:var(--it-green);
  border:2px solid var(--ol); border-radius:6px;
  padding:.18em .45em;
}
.city-chip{ text-decoration:none; }
/* per-city Telegram handle pill inside each city chip */
.city-tg{
  font-family:var(--f-mono); font-weight:700; font-size:.62rem;
  letter-spacing:.02em; white-space:nowrap;
  color:var(--cyan); background:rgba(0,0,0,.28);
  border:2px solid var(--ol); border-radius:6px;
  padding:.18em .45em;
}
.city-chip.is-main{
  background:var(--panel2);
  border-color:var(--cyan);
  box-shadow:5px 5px 0 var(--ol), 0 0 22px -3px var(--it-green);
}
.city-chip.is-main .city-name{ color:var(--cyan); }
.city-chip.is-main .city-tg{ color:var(--it-green); }

/* ============================================================
   CONTATTI — LEVEL SELECT (quantity → channel picker)
   ============================================================ */
.contact-rows{ display:flex; flex-direction:column; gap:1.1rem; }

/* quantity selector (3 chips, one per range) */
.qty-select{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  margin-bottom:.4rem;
}
.qty-chip{
  font-family:var(--f-mono); font-weight:800; font-size:.78rem; letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink); background:var(--panel2);
  border:3px solid var(--ol); border-radius:999px;
  padding:.65em 1.1em; box-shadow:var(--sticker-sh-sm);
}
.qty-chip:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ol); color:var(--ink); }
.qty-chip:active{ transform:translate(2px,2px) scale(.96); box-shadow:2px 2px 0 var(--ol); }
.qty-chip.is-active{
  color:var(--ink-on); background:var(--yellow);
  transform:rotate(-1.5deg);
  box-shadow:5px 5px 0 var(--ol), 0 0 18px -3px var(--yellow);
}

/* channel cards */
.ch-row{
  position:relative;
  display:flex; align-items:center; gap:1rem;
  background:var(--panel);
  border:3.5px solid var(--ol); border-radius:14px;
  padding:1rem 1.1rem;
  box-shadow:var(--sticker-sh);
  transition:transform .16s ease, box-shadow .16s ease, border-color .2s ease, opacity .25s ease, filter .25s ease;
}
.ch-row:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ol); border-color:var(--tg); }
.ch-row:active{ transform:translate(-1px,-1px) scale(.99); }
.ch-row.is-active{
  border-color:var(--it-green);
  box-shadow:7px 7px 0 var(--ol), 0 0 30px -3px var(--it-green);
  transform:translate(-2px,-2px);
}
.ch-row.is-dim{ opacity:.5; filter:saturate(.65); }

.ch-ico{
  display:grid; place-items:center; flex:0 0 auto;
  width:50px; height:50px;
  color:#fff; background:var(--tg);
  border:2.5px solid var(--ol); border-radius:12px;
  box-shadow:var(--sticker-sh-sm);
  transform:rotate(-3deg);
}
.ch-ico svg{ width:24px; height:24px; }
.ch-meta{ display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1 1 auto; }
.ch-handle{
  font-family:var(--f-display); font-size:1.35rem; letter-spacing:.5px;
  color:var(--ink); -webkit-text-stroke:.6px var(--ol);
  word-break:break-word;
}
.ch-range{
  font-family:var(--f-mono); font-weight:500; font-size:.74rem;
  letter-spacing:.04em; color:var(--ink-mute); text-transform:uppercase;
}

/* "COPIA" handle button */
.ch-copy{
  flex:0 0 auto;
  font-family:var(--f-mono); font-weight:800; font-size:.64rem; letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink); background:var(--panel2);
  border:2.5px solid var(--ol); border-radius:8px; padding:.55em .7em;
  box-shadow:2px 2px 0 var(--ol);
}
.ch-copy:hover{ background:var(--cyan); color:var(--ink-on); transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ol); }
.ch-copy:active{ transform:translate(1px,1px) scale(.95); box-shadow:1px 1px 0 var(--ol); }

.ch-arrow{
  flex:0 0 auto;
  font-size:1.3rem; color:var(--cyan); font-weight:800;
  transition:transform .2s ease;
}
.ch-row:hover .ch-arrow{ transform:translate(3px,-3px); }

/* CONSIGLIATO badge — shown when channel is the active match */
.ch-reco{
  position:absolute; top:-.75rem; right:1rem; z-index:3;
  font-family:var(--f-mono); font-weight:800; font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-on); background:var(--it-green);
  border:2.5px solid var(--ol); border-radius:6px; padding:.22em .5em;
  box-shadow:var(--sticker-sh-sm); transform:rotate(-3deg);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.ch-row.is-active .ch-reco{ opacity:1; }

/* comic "COPIATO!" toast (JS toggles .show) */
.copy-toast{
  position:absolute; top:-.8rem; left:1rem; z-index:4;
  font-family:var(--f-display); font-size:1.05rem; letter-spacing:.5px;
  color:var(--ink-on); background:var(--yellow);
  border:2.5px solid var(--ol); border-radius:8px; padding:.05em .55em;
  box-shadow:var(--sticker-sh-sm);
  -webkit-text-stroke:.4px var(--ol);
  opacity:0; transform:rotate(-3deg) scale(.4); pointer-events:none;
}
.copy-toast.show{ animation:toastpop 1.2s ease; }

/* ============================================================
   FOOTER (understated)
   ============================================================ */
.foot{
  border-top:3px solid var(--ol);
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(0,229,255,.07), transparent 58%),
    var(--bg2);
  padding-block:clamp(2rem,5vw,3rem);
}
.foot-top{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1.2rem 1.6rem;
}
.foot-brand{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.foot-mark{
  display:grid; place-items:center;
  width:46px; height:46px; flex:0 0 auto;
  border:2.5px solid var(--ol); border-radius:10px; overflow:hidden;
  background:var(--panel2); transform:rotate(-2deg);
  box-shadow:var(--sticker-sh-sm);
  transition:transform .18s ease;
}
.foot-brand:hover .foot-mark{ transform:rotate(2deg) scale(1.04); }
.foot-mark img{ width:100%; height:100%; object-fit:cover; }
.foot-brand-txt{ display:flex; flex-direction:column; gap:.16rem; min-width:0; }
.foot-name{
  font-family:var(--f-display); font-size:1.42rem; letter-spacing:.5px;
  line-height:1; color:var(--ink); -webkit-text-stroke:.5px var(--ol);
}
.foot-name b{ color:var(--cyan); }
.foot-tag{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.05em;
  color:var(--ink-mute); text-transform:uppercase;
}
.foot-links{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.4rem;
  font-family:var(--f-mono); font-weight:600; font-size:.82rem;
  letter-spacing:.05em; text-transform:uppercase;
}
.foot-links a{ color:var(--ink-dim); padding-block:.2em; transition:color .15s ease; }
.foot-links a:hover{ color:var(--cyan); }
.foot-tg{
  display:inline-flex; align-items:center; gap:.5em; flex:0 0 auto;
  font-family:var(--f-mono); font-weight:700; font-size:.82rem; letter-spacing:.04em;
  color:#fff; background:var(--tg);
  border:2.5px solid var(--ol); border-radius:999px;
  padding:.55em 1.1em; box-shadow:var(--sticker-sh-sm);
  transition:transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.foot-tg .tg-dot{
  width:.55em; height:.55em; border-radius:50%;
  background:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.35);
  animation:tgpulse 1.8s ease-in-out infinite;
}
.foot-tg:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ol); filter:brightness(1.08); }
.foot-tg:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ol); }
.foot-base{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.5rem 1.2rem;
  margin-top:clamp(1.3rem,3.2vw,1.9rem);
  padding-top:clamp(1rem,2.6vw,1.4rem);
  border-top:2px solid var(--line);
}
.foot-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.74rem; color:var(--ink-mute);
}
.foot-meta .dot{ color:var(--line); }
.foot-disc{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.05em;
  color:var(--ink-mute); text-transform:uppercase; opacity:.82;
}

/* cursor trail safety (motion.js owns visuals) */
#trail{ position:fixed; inset:0; z-index:60; pointer-events:none; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes tgpulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.7); } }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
@keyframes fadein{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@keyframes popslam{
  0%{ transform:scale(.82) rotate(-2.5deg); }
  60%{ transform:scale(1.05) rotate(1deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
@keyframes burstspin{ to{ transform:rotate(360deg); } }
@keyframes glowpulse{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } }
@keyframes blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:.18; } }
@keyframes shinesweep{
  0%{ transform:translateX(-130%) rotate(8deg); }
  100%{ transform:translateX(130%) rotate(8deg); }
}
@keyframes toastpop{
  0%{ opacity:0; transform:rotate(-3deg) scale(.4); }
  18%{ opacity:1; transform:rotate(-3deg) scale(1.14); }
  32%{ transform:rotate(-3deg) scale(1); }
  78%{ opacity:1; transform:rotate(-3deg) scale(1); }
  100%{ opacity:0; transform:rotate(-3deg) scale(.85); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* desktop ≥1100 → 3 cols (default). Tablet → 2 cols. */
@media (max-width:1099px){
  .cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:719px){
  .cat-grid{ grid-template-columns:1fr; }
  .strip{ grid-template-columns:repeat(2,1fr); }
  .nav-links{ display:none; }              /* keep brand + CTA only on small screens */
  .pop::before{ left:-1.2rem; width:5rem; height:5rem; }
  /* hero: big centered logo, stacked thumb-sized CTAs */
  .hero{ padding-top:clamp(4.5rem,12vh,6rem); }
  .hero-logo{ width:min(92vw,520px); }
  .hero-ctas{ flex-direction:column; width:100%; max-width:340px; }
  .hero-ctas .btn{ width:100%; }
  /* contatti: keep long telegram handles on one tidy line (no mid-word break) */
  .ch-row{ gap:.75rem; }
  .ch-ico{ width:44px; height:44px; }
  .ch-ico svg{ width:21px; height:21px; }
  .ch-handle{ font-size:clamp(.9rem,3.9vw,1.2rem); letter-spacing:.2px; white-space:nowrap; word-break:normal; }
  /* RELIABILITY > fade-in: on phones a fast fling can outrun the reveal IO, and a
     tall block (FROZEN = 11 cards single-column) can never satisfy the ratio —
     leaving whole sections (cards, intro, urus band, section headers) invisible.
     Force EVERY .reveal visible on small screens. Cards are also a touch smaller. */
  .reveal{ opacity:1 !important; transform:none; }
  .card-media{ aspect-ratio:1 / 1; }            /* was 3/4 — shorter card */
  .card-body{ gap:.55rem; padding:.8rem .85rem 1rem; }
  .card-name{ font-size:1.18rem; }
  .tier{ padding:.4rem .6rem; }
  /* promo ribbon: wrap tidy, no overflow */
  .promo-omaggio{ flex-wrap:wrap; gap:.6rem .8rem; padding:.85rem .9rem; margin-bottom:1.5rem; }
  .promo-ico{ font-size:2rem; }
  .promo-tag{ margin-left:auto; font-size:.9rem; }
  .promo-body{ flex-basis:100%; order:3; }
}
@media (max-width:380px){
  body{ font-size:14px; }
  .foot-inner{ flex-direction:column; align-items:flex-start; }
  .promo-main{ font-size:1.28rem; }
}

/* coarse pointers: bigger tap targets for inline links */
@media (pointer:coarse){
  /* touch devices fast-fling past the reveal IO — guarantee ALL content shows. */
  .reveal{ opacity:1 !important; transform:none; }
  .nav-links a{ padding-block:.7em; min-height:44px; display:inline-flex; align-items:center; }
  .nav-cta{ min-height:44px; }
  .btn{ min-height:48px; }
  .card-cta{ min-height:48px; }
  .ch-row{ min-height:64px; }
  .grade-tab{ min-height:44px; }
  .city-chip{ min-height:44px; }
  .qty-chip{ min-height:46px; }
  .ch-copy{ min-height:44px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .marq-track{ animation:none; transform:none; }
  .reveal{ opacity:1; transform:none; }
  .pop.in{ animation:none; }
  .pop::before{ opacity:.7; transform:translateY(-50%) scale(1); }
  .hero-logo{ transform:none; }
  .hero-logo-burst{ animation:none; }
  .hero-scrollcue,.eyebrow-dot,.tg-dot{ animation:none; }
  .card:hover{ transform:none; }
  .card:hover .pvid{ transform:none; }
  .card-shine{ opacity:.3; }
  .card-shine::before{ animation:none; opacity:0; }
  /* keep copy feedback readable, just no bounce */
  .copy-toast.show{ animation:none; opacity:1; transform:rotate(-3deg) scale(1); }
}

/* ============================================================
   JS-FAILURE HARDENING — content never stays hidden if JS is
   disabled or fails to toggle .in (hero/video work without JS).
   ============================================================ */
@media (scripting: none){
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   HERO LOGO CLIP — feather the AI clip's edges so its sunburst
   background melts seamlessly into the dark page (no visible box).
   ============================================================ */
.hero-logo-vid,
.hero-logo-fallback{
  -webkit-mask-image: radial-gradient(82% 78% at 50% 49%, #000 42%, rgba(0,0,0,0) 74%);
          mask-image: radial-gradient(82% 78% at 50% 49%, #000 42%, rgba(0,0,0,0) 74%);
}

/* ============================================================
   URUS DELIVERY BAND — full-bleed looping clip + comic overlay
   ============================================================ */
.urus{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(360px,56vh,560px);
  display:grid; place-items:center;
  border-block:3px solid var(--ol);
  background:var(--bg2);
}
.urus-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; filter:saturate(1.06) contrast(1.02);
}
.urus-grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(0,229,255,.10), transparent 60%),
    linear-gradient(90deg, rgba(8,8,15,.94), rgba(8,8,15,.5) 45%, rgba(8,8,15,.86));
}
.urus-inner{
  position:relative; z-index:2; text-align:center;
  max-width:min(720px,92vw); padding:clamp(1.4rem,5vw,3rem);
}
.urus-inner .kicker{ margin:0 auto .7rem; }
.urus-inner h3{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.3rem,8.5vw,4.8rem); line-height:.94; letter-spacing:.5px;
  color:var(--ink); -webkit-text-stroke:2px var(--ol);
  margin:.15em 0 .4em;
}
.urus-inner h3 em{ color:var(--yellow); font-style:normal; }
.urus-inner p{
  color:var(--ink-dim); font-weight:500;
  font-size:clamp(.96rem,2.6vw,1.12rem); line-height:1.5;
  margin:0 auto 1.5rem; max-width:46ch;
}
@media (prefers-reduced-motion: reduce){ .urus-bg{ display:none; } }