/* =======================================================================
   Aversions Crown — Global Theme (CLEAN)
   - Fixed red/black wallpaper
   - Polished hero slideshow (no harsh bands)
   - TV stack glow + hotspots
   - Music ghost, Tour, Merch
   - Sensible motion + landscape tweaks
   ======================================================================= */

/* ========= 0) Base & Tokens ========= */
:root{
  --bg:#000;
  --text:#f2f2f2;
  --muted:#a9a9a9;
  --accent:#d61a1a;
  --maxw:1120px;

  /* hero */
  --hero-min: clamp(360px, 62vh, 920px);

  /* tv */
  --tv-height: clamp(420px, 56vh, 760px);
}

*{ box-sizing:border-box; }
html,body{ margin:0; background:#000; color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif; overflow-x:hidden; }

a{ color:inherit; text-decoration:none; }
.container{ max-width:var(--maxw); margin:auto; padding:0 20px; }
.section{ padding:80px 0; border-top:1px solid #111; color:var(--muted); }

/* first section bottom gap trimmed */
main > section:first-of-type{ padding-block-end: clamp(10px, 2.6vh, 28px); margin-block-end: clamp(8px, 2vh, 20px); }

/* sr-only utility */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ========= 1) Buttons ========= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; min-width:240px; border-radius:999px;
  font-weight:800; letter-spacing:.4px; color:#fff; text-align:center;
  border:1px solid rgba(255,255,255,.15); background:rgba(16,16,16,.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 12px rgba(255,255,255,0.1);
  transition: all .25s ease;
}
.btn svg{ width:20px; height:20px; flex:0 0 auto; }

.btn-primary{ background:var(--accent); border-color:transparent; }
.btn-outline{ background:transparent; border-color:#333; }
.btn-accent{ border-color:var(--accent); color:var(--accent); }
.btn:hover{ transform:translateY(-2px); }
.btn-primary:hover{ box-shadow:0 10px 26px rgba(214,26,26,.45); }
.btn-accent:hover{ background:var(--accent); color:#fff; box-shadow:0 10px 26px rgba(214,26,26,.45); }

@keyframes pillPulse{ 0%,100%{filter:brightness(100%)} 50%{filter:brightness(118%)} }
.music-buttons{ margin-top:20px; display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.music-buttons .btn{ animation:pillPulse 4.8s ease-in-out infinite; }
.music-buttons .btn.spotify{ background:rgba(29,185,84,.25); box-shadow: inset 0 0 18px rgba(29,185,84,.45), 0 8px 18px rgba(29,185,84,.25); }
.music-buttons .btn.spotify:hover{ background:rgba(29,185,84,.35); box-shadow: inset 0 0 22px rgba(29,185,84,.55), 0 10px 22px rgba(29,185,84,.35); }
.music-buttons .btn.apple{ background:rgba(250,35,59,.25); box-shadow: inset 0 0 18px rgba(250,35,59,.45), 0 8px 18px rgba(250,35,59,.25); }
.music-buttons .btn.apple:hover{ background:rgba(250,35,59,.35); box-shadow: inset 0 0 22px rgba(250,35,59,.55), 0 10px 22px rgba(250,35,59,.35); }

/* mobile button width */
@media (max-width:640px){ .btn{ width:100%; max-width:520px; min-width:0; } }

/* ========= 2) Global Wallpaper ========= */
html::before, body::after{ content:none !important; } /* nuke legacy */
body{ position:relative; isolation:isolate; }
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("assets/background-bottom.png") center/cover no-repeat;
  transform:translateZ(0);
}
.df-header,.hero,.tvs-wrap,.main-content{ position:relative; z-index:1; background:transparent; }

/* ========= 3) HERO / Slideshow ========= */
.hero{ position:relative; height:100vh; min-height:var(--hero-min); overflow:hidden; z-index:1; }
.slideshow{ position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate; }

/* top fade to kill header seam */
.slideshow::before{
  content:""; position:absolute; left:0; right:0; top:0; height:140px; z-index:16; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,.85) 0, rgba(0,0,0,.7) 40px, rgba(0,0,0,.35) 90px, rgba(0,0,0,0) 140px);
}
/* edge feather/vignette into wallpaper */
.slideshow::after{
  content:""; position:absolute; inset:0; z-index:16; pointer-events:none;
  background: radial-gradient(120% 85% at 50% 55%, rgba(0,0,0,0) 55%, rgba(0,0,0,.22) 75%, rgba(0,0,0,.40) 92%, rgba(0,0,0,.58) 100%);
  mix-blend-mode:multiply;
}

/* slides */
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease-in-out; will-change:opacity; }
.slide.active{ opacity:1; }
.slide img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter: brightness(.95) contrast(1.05); transform:scale(1.02); transition:transform 6s ease;
}
.slide.active img{ transform:scale(1.06); }

/* ========= Slideshow Logo Glitch Hooks ========= */
.hero-slideshow.glitching .logo-overlay img,
.slideshow.glitching .logo-overlay img {
  mix-blend-mode: screen;
  filter: brightness(1.25) contrast(1.25)
          drop-shadow(0 0 10px rgba(214,26,26,.25))
          drop-shadow(2px 0 0 rgba(0,180,255,.20))
          drop-shadow(-2px 0 0 rgba(255,0,80,.18));
  animation: logoJitter 420ms steps(3, end);
}

.hero-slideshow.shake .logo-overlay img,
.slideshow.shake .logo-overlay img {
  transform: translate3d(0,0,0) scale(1.01);
}

@keyframes logoJitter {
  0%   { transform: translate(0,0); }
  35%  { transform: translate(1px,-1px); }
  70%  { transform: translate(-1px,1px); }
  100% { transform: translate(0,0); }
}

/* focal helpers */
.slide[data-focus="upper"] img{ object-position:center 32%; }
.slide[data-focus="upper-left"] img{ object-position:35% 30%; }
.slide[data-focus="upper-right"] img{ object-position:65% 30%; }
.slide[data-focus="lower"] img{ object-position:center 68%; }
.slide[data-focus="left"] img{ object-position:32% center; }
.slide[data-focus="right"] img{ object-position:68% center; }
/* specific zoom-out slide */
.slide[data-zoom="out"] img{ object-fit:contain; background:#000; transform:scale(.9); }

/* overlayed content */
.logo-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:20; pointer-events:none; }
.logo-overlay img{ width:clamp(320px,80vw,1000px); height:auto; filter:drop-shadow(0 0 18px rgba(0,0,0,.9)); animation:logoBreath 3.6s ease-in-out infinite; }
@keyframes logoBreath{
  0%{ filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,255,255,.9)) drop-shadow(0 0 22px rgba(214,26,26,.55)); transform:scale(1.10); }
  50%{ filter:brightness(0) invert(1) drop-shadow(0 0 18px rgba(255,255,255,1)) drop-shadow(0 0 36px rgba(214,26,26,.75)); transform:scale(1.12); }
  100%{filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,255,255,.9)) drop-shadow(0 0 22px rgba(214,26,26,.55)); transform:scale(1.10); }
}

.hero-overlay{ position:absolute; left:50%; bottom:6vh; transform:translateX(-50%); z-index:21; text-align:center; }
.hero-title{ display:none; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* slideshow controls (optional) */
.slideshow__dots{ position:absolute; left:50%; bottom:clamp(12px, 2.4vh, 28px); transform:translateX(-50%); display:flex; gap:8px; z-index:22; }
.slideshow__dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); transition:background .2s, transform .2s, outline-color .2s; outline:2px solid transparent; }
.slideshow__dot.is-active{ background:#fff; transform:scale(1.1); }
.slideshow__dot:focus-visible{ outline-color:rgba(255,255,255,.6); }

.slideshow__arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.35); color:#fff; display:grid; place-items:center; opacity:0; transition: opacity .25s, background .2s; z-index:22; }
.slideshow:hover .slideshow__arrow{ opacity:.9; }
.slideshow__arrow:hover{ background:rgba(0,0,0,.55); }
.slideshow__arrow--prev{ left:12px; } .slideshow__arrow--next{ right:12px; }

/* FX (scanlines / noise / chroma) */
.fx{ position:absolute; inset:0; pointer-events:none; z-index:15; }
.fx-scanlines{ background:repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 2px 3px); animation:scanFlicker 2.2s steps(10) infinite; mix-blend-mode:overlay; opacity:.2; }
@keyframes scanFlicker{ 0%,100%{opacity:.16; transform:translateY(0)} 45%{opacity:.28; transform:translateY(-1px)} 55%{opacity:.12; transform:translateY(1px)} }
.fx-noise{
  background:
    radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.20),transparent 50%),
    radial-gradient(1px 1px at 30% 80%,rgba(255,255,255,.16),transparent 50%),
    radial-gradient(1px 1px at 70% 40%,rgba(255,255,255,.18),transparent 50%),
    radial-gradient(1px 1px at 90% 60%,rgba(255,255,255,.16),transparent 50%);
  background-size:180px 180px,190px 190px,210px 210px,230px 230px;
  animation:noiseJump 1s steps(6) infinite; opacity:.22; mix-blend-mode:soft-light;
}
@keyframes noiseJump{ 0%{transform:translate(0,0)} 25%{transform:translate(-4px,2px)} 50%{transform:translate(3px,-3px)} 75%{transform:translate(-2px,1px)} 100%{transform:translate(0,0)} }
.fx-chroma{ background:linear-gradient(90deg,rgba(255,0,80,.14),transparent 40% 60%,rgba(0,180,255,.14)); mix-blend-mode:screen; animation:chromaDrift 3s ease-in-out infinite; opacity:.30; }
@keyframes chromaDrift{ 0%{transform:translate(0,0)} 50%{transform:translate(2px,-2px)} 100%{transform:translate(0,0)} }

/* hero responsive */
@media (max-width:600px){
  .slideshow{ height:80svh; }
  .logo-overlay img{ width:clamp(260px,76vw,480px); }
  .hero-overlay{ bottom:4vh; }
}
/* landscape / short viewports */
@media (orientation: landscape) and (max-height:480px){
  .slideshow{ min-height:64vh; }
  .slide img{ object-position:50% 35%; }
  .hero-overlay{ bottom:3vh; }
  .slideshow__arrow{ width:36px; height:36px; opacity:.85; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .slideshow::after,.fx-scanlines,.fx-noise,.fx-chroma{ animation:none; opacity:.08; }
  .slide.active img{ transform:none !important; transition:none !important; }
  .logo-overlay img{ animation:none; }
}

/* =========================================================================
   Aversions Crown — Global Theme
   ========================================================================= */
:root {
  --bg: #000;
  --text: #f2f2f2;
  --muted: #a9a9a9;
  --accent: #d61a1a;
  --maxw: 1120px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

.container { max-width: var(--maxw); margin: auto; padding: 0 20px; }

a {
  color: var(--text);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover { color: var(--accent); }

.section { padding: 80px 0; border-top: 1px solid #111; }

/* Reset images */
img { max-width: 100%; height: auto; display: block; }

/* Utility */
.hidden { display: none !important; }
/* ========= 5) MUSIC GHOST ========= */
.music-ghost-raw{ position:relative; width:100%; display:flex; justify-content:center; align-items:center; margin:18px 0 22px; isolation:isolate; }
.music-ghost-raw.fx::after{ content:""; position:absolute; inset:-6% -3%; pointer-events:none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.35) 90%); z-index:0; }
.music-ghost-raw img{
  position:relative; z-index:1; width:clamp(340px,68vw,980px); height:auto;
  mix-blend-mode:screen; opacity:.85;
  filter: brightness(160%) contrast(215%) drop-shadow(0 0 26px rgba(255,255,255,.35));
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 62%, rgba(0,0,0,0) 92%);
          mask-image: radial-gradient(circle at 50% 45%, #000 62%, rgba(0,0,0,0) 92%);
  animation: ghostIn .9s ease-out both, ghostBreathe 6.5s ease-in-out infinite, ghostFloat 10s ease-in-out infinite;
  will-change: transform, opacity, filter;
}
.music-ghost-raw.fx::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.12) 47%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.12) 53%, transparent 70%);
  mix-blend-mode:screen; opacity:0; transform:translateX(-40%); animation: shimmer 7.5s ease-in-out infinite 1.2s;
}
@keyframes shimmer{ 0%{opacity:0; transform:translateX(-40%)} 15%{opacity:.14} 45%{opacity:.18; transform:translateX(40%)} 60%{opacity:0} 100%{opacity:0; transform:translateX(40%)} }
@keyframes ghostIn{ from{opacity:0; transform:translateY(10px) scale(.985); filter:brightness(130%) contrast(180%)} to{opacity:.85; transform:none} }
@keyframes ghostBreathe{ 0%,100%{filter:brightness(160%) contrast(215%) drop-shadow(0 0 26px rgba(255,255,255,.35))} 50%{filter:brightness(175%) contrast(230%) drop-shadow(0 0 30px rgba(255,255,255,.5))} }
@keyframes ghostFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@media (hover:hover){ .music-ghost-raw:hover img{ opacity:.96; filter:brightness(185%) contrast(245%) drop-shadow(0 0 32px rgba(255,255,255,.6)); transition:filter .25s, opacity .25s; } }
@media (max-width:600px){ .music-ghost-raw img{ opacity:.92; filter:brightness(175%) contrast(235%); } }
@media (prefers-reduced-motion:reduce){ .music-ghost-raw img{ animation:none } .music-ghost-raw.fx::before{ animation:none; opacity:.06; } }
@supports not (mix-blend-mode: screen){ .music-ghost-raw img{ mix-blend-mode:normal; opacity:.9; } }
/* ===== Blank TV subtle animations (no change to logo TVs) ===== */
.tvsfx__hotspots .tv-blank{
  position:absolute; transform:translate(-50%,-50%);
  pointer-events:none; z-index:4; border-radius:6px; overflow:hidden;
  /* base CRT tint */
  background:
    /* scanlines */
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
    /* soft vignette */
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,.25) 74%, transparent 100%),
    /* glass green */
    linear-gradient(#0a2a20,#0a2a20);
  mix-blend-mode: screen;            /* sits “on” the dark glass */
  opacity:.55;                        /* subtle by default */
  animation: tvFlicker 2.6s ease-in-out infinite;
  filter: saturate(115%) brightness(105%) contrast(105%);
}

/* Per-screen placements (1152×768 map like your hotspots) */
.tb1{ left:50%; top:26.8%; width:10%; height:12%; animation-duration: 2.2s; }  /* top-mid small */
.tb2{ left:82%; top:27%;   width:22%; height:22%; animation-duration: 3.1s; }  /* top-right */
.tb3{ left:82%; top:47%;   width:22%; height:22%; animation-duration: 2.7s; }  /* mid-right */
.tb4{ left:50%; top:73.2%; width:22%; height:22%; animation-duration: 3.4s; }  /* bottom-mid cracked */

/* Noise shimmer moving slowly */
.tvsfx__hotspots .tv-blank::before{
  content:""; position:absolute; inset:0; border-radius:inherit; mix-blend-mode:screen;
  background:
    radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.20), transparent 55%) 0 0/8px 8px,
    radial-gradient(1px 1px at 66% 78%, rgba(255,255,255,.16), transparent 55%) 0 0/9px 9px,
    radial-gradient(1px 1px at 36% 58%, rgba(255,255,255,.14), transparent 55%) 0 0/7px 7px;
  opacity:.35;
  animation: tvStatic 24s linear infinite;
}

/* Occasional horizontal glitch sweep band */
.tvsfx__hotspots .tv-blank::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:
    linear-gradient(90deg, transparent 0%, rgba(64,255,170,.18) 50%, transparent 100%);
  filter: blur(2px);
  opacity:0;
  animation: tvSweep 6s linear infinite;
}

/* Keyframes */
@keyframes tvFlicker{
  0%,100%{ opacity:.48; filter:brightness(1.00) }
  20%    { opacity:.62; filter:brightness(1.06) }
  45%    { opacity:.52; filter:brightness(1.03) }
  60%    { opacity:.66; filter:brightness(1.10) }
  78%    { opacity:.50; filter:brightness(1.02) }
}

@keyframes tvStatic{
  0%   { background-position: 0 0, 0 0, 0 0; }
  50%  { background-position: 8% -6%, -7% 4%, 6% -4%; }
  100% { background-position: 0 0, 0 0, 0 0; }
}

@keyframes tvSweep{
  0%,70%  { opacity:0; transform: translateX(-120%); }
  74%     { opacity:.45; }
  78%     { opacity:.15; }
  82%,100%{ opacity:0; transform: translateX(120%); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .tvsfx__hotspots .tv-blank,
  .tvsfx__hotspots .tv-blank::before,
  .tvsfx__hotspots .tv-blank::after{ animation:none !important; }
}
/* ===== Rare Power Surge Blink (blank TVs only) ===== */
.tvsfx__hotspots .tv-blank.surge {
  animation: tvFlicker 2.6s ease-in-out infinite, tvSurge 25s linear infinite;
}

/* Bright white zap effect */
@keyframes tvSurge {
  0%, 95%, 100% { filter: brightness(1) contrast(1); opacity: .55; }
  96% { filter: brightness(3) contrast(1.6) saturate(140%); opacity: .95; }
  97% { filter: brightness(2.2) contrast(1.3) saturate(120%); opacity: .75; }
  98% { filter: brightness(1.4) contrast(1.1); opacity: .60; }
  99% { filter: brightness(1.1) contrast(1); opacity: .55; }
}
/* --- FIX: confine all animated layers to the TV rectangles --- */
#social .tvsfx__hotspots .hs,
#social .tv-blank {
  overflow: hidden;           /* <- keeps ::before/::after inside the box */
  border-radius: 6px;         /* consistent rounded edge */
  clip-path: inset(0 round 6px);
}

/* ensure pseudo-elements sit exactly on the box, not overhanging */
#social .tvsfx__hotspots .hs::before,
#social .tvsfx__hotspots .hs::after,
#social .tv-blank.tb-tr,
#social .tv-blank.tb-mr {
  inset: 0 !important;
}

/* tone down peripheral glow so it doesn’t flare beyond the bezels */
#social .tvsfx__hotspots .hs:not(.hs1)::before {
  box-shadow:
    0 0 8px rgba(0,255,160,.35),
    0 0 18px rgba(0,255,160,.18);
}

#social .tvsfx__hotspots .hs:not(.hs1)::after {
  opacity: .25;               /* lighter sweep highlight */
}

/* the two blank-TV overlays keep the same effect, but clipped */
#social .tv-blank.tb-tr,
#social .tv-blank.tb-mr {
  box-shadow:
    0 0 8px rgba(0,255,160,.35),
    0 0 18px rgba(0,255,160,.18);
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.22), transparent 55%) 0 0/6px 6px,
    radial-gradient(1px 1px at 70% 70%, rgba(255,255,255,.18), transparent 55%) 0 0/7px 7px,
    repeating-linear-gradient(to bottom, rgba(0,255,160,.22) 0 2px, rgba(0,255,160,.08) 2px 4px, transparent 4px 6px);
}

/* optional: tiny global lift so screens read brighter but not washed */
#social .tvsfx__frame > img { filter: brightness(1.3) contrast(1.12) saturate(1.05); }
/* ========= 6) TOUR ========= */
.tour{ text-align:center; }
.tour-title{ margin:0 0 18px; font-weight:800; letter-spacing:.02em; color:#fff; }
.tour-posters{ display:grid; gap:18px; justify-items:center; margin-bottom:16px; }
.tour-art{ margin:0; width:100%; max-width:min(980px,100%); }
.tour-art img{ width:100%; height:auto; display:block; border-radius:10px; box-shadow:0 18px 60px rgba(0,0,0,.55); }
.tour-banner{ display:none; }

@media (min-width:900px){
  .tour-posters{ grid-template-columns: 1.35fr .9fr; align-items:start; gap:24px; }
  .tour-banner{ display:block; }
  .tour-art{ max-width:none; }
  .tour-banner img{ aspect-ratio:16/9; object-fit:cover; }
  .tour-poster img{ max-width:640px; }
}

/* CTA */
.tour-cta{ margin-top:16px; }
.tour-btn{
  display:inline-block; padding:14px 40px; font-size:1.1rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#fff;
  background:linear-gradient(135deg,#d61a1a 0%,#a00000 100%); border:2px solid #d61a1a; border-radius:50px;
  box-shadow:0 0 14px rgba(214,26,26,.45), 0 0 24px rgba(0,0,0,.6);
  transition: transform .25s, background .25s, border-color .25s; animation: neonPulse 2.8s ease-in-out infinite;
}
.tour-btn:hover{ background:linear-gradient(135deg,#ff1a1a 0%,#c00000 100%); border-color:#ff1a1a; box-shadow:0 0 18px rgba(255,60,60,.85), 0 0 32px rgba(214,26,26,.65); transform:translateY(-2px) scale(1.04); }
@keyframes neonPulse{ 0%{box-shadow:0 0 10px rgba(214,26,26,.35),0 0 18px rgba(214,26,26,.25); filter:brightness(1)} 50%{box-shadow:0 0 16px rgba(214,26,26,.55),0 0 28px rgba(214,26,26,.45); filter:brightness(1.04)} 100%{box-shadow:0 0 10px rgba(214,26,26,.35),0 0 18px rgba(214,26,26,.25); filter:brightness(1)} }
@media (prefers-reduced-motion:reduce){ .tour-btn{ animation:none } }

/* ========= 7) MERCH ========= */
#merch{ position:relative; isolation:isolate; z-index:3; }
.merch-card.glass{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .25s, border-color .25s;
}
.merch-card.glass:hover{ transform:translateY(-4px) scale(1.02); border-color: var(--merch-accent); }
.merch-card .thumb{ aspect-ratio:1/1; background-size:cover; background-position:center; }

#merch .merch-tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:18px auto 22px; padding:0; border:0; background:transparent;
}
#merch .merch-tab{
  appearance:none; border:1px solid rgba(255,255,255,.18); border-radius:8px; padding:12px 18px;
  background:rgba(16,16,16,.85); color:var(--merch-text,#f3f3f3); font-weight:700; letter-spacing:.03em; text-transform:uppercase; line-height:1; white-space:nowrap;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; box-shadow: inset 0 0 6px rgba(255,255,255,.05); cursor:pointer;
}
#merch .merch-tab__title{ margin-right:.4rem; } #merch .merch-tab__note{ opacity:.75; font-size:.85rem; }
#merch .merch-tab:hover{ transform:translateY(-1px); background:rgba(28,28,28,.95); box-shadow:0 0 10px rgba(255,255,255,.08); }
#merch .merch-tab:focus-visible{ outline:none; box-shadow:0 0 0 2px color-mix(in oklab, var(--merch-accent,#ff6a1a) 40%, transparent); }
#merch .merch-tab.is-active{
  background:var(--merch-accent,#ff6a1a); border-color:var(--merch-accent,#ff6a1a); color:#111; text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 0 16px color-mix(in oklab, var(--merch-accent,#ff6a1a) 55%, transparent), inset 0 0 4px rgba(0,0,0,.45);
}
#merch .merch-tab.is-active::after{ content:""; display:block; height:2px; margin-top:8px; border-radius:2px; background: radial-gradient(60% 200% at 50% 50%, #fff, transparent 70%); opacity:.5; }
@media (min-width:520px){ #merch .merch-tabs{ position:sticky; top:clamp(56px,7vh,84px); z-index:5; } }
@media (max-width:520px){ #merch .merch-tab{ padding:10px 14px; font-size:.95rem; } #merch .merch-tab__note{ display:none; } }

/* ========= 8) Motion A11y ========= */
@media (prefers-reduced-motion:reduce){
  .fx-scanlines,.fx-noise,.fx-chroma,.slideshow::after,.tvsfx__frame::before,.tvsfx__frame::after{ animation:none !important; }
  .music-buttons .btn{ animation:none !important; }
}
/* Logo glitch pack */
.slideshow.glitching .logo-overlay img,
.hero-slideshow.glitching .logo-overlay img{
  mix-blend-mode: screen;
  filter: brightness(1.25) contrast(1.28)
          drop-shadow(0 0 10px rgba(214,26,26,.28))
          drop-shadow(2px 0 0 rgba(0,180,255,.25))
          drop-shadow(-2px 0 0 rgba(255,0,80,.22));
  animation: logoJitter 420ms steps(3,end);
}

/* quick white flash + scan pop */
.slideshow.glitching .logo-overlay::after,
.hero-slideshow.glitching .logo-overlay::after{
  content:"";
  position:absolute; left:-10%; right:-10%; top:50%; height:2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  filter: blur(1px);
  opacity:.85;
  animation: logoFlash 480ms ease-out both;
  pointer-events:none;
}

@keyframes logoJitter{
  0%{transform:translate(0,0)}
  35%{transform:translate(1px,-1px)}
  70%{transform:translate(-1px,1px)}
  100%{transform:translate(0,0)}
}
@keyframes logoFlash{
  0%{opacity:.0; transform:translateY(-50%) scaleY(.1)}
  20%{opacity:.95; transform:translateY(-50%) scaleY(1.8)}
  70%{opacity:.35; transform:translateY(-50%) scaleY(.6)}
  100%{opacity:0; transform:translateY(-50%) scaleY(.3)}
}
/* === Outer Dark banner enhancements === */
.cc-banner--outerdark {
  position: relative;
  overflow: hidden;
}

.cc-banner--outerdark::before {
  content:"";
  position:absolute; inset:0;
  background:rgba(0,255,128,.08); /* faint CRT green wash */
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:1;
}

.cc-banner--outerdark::after {
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,255,128,.12) 0 1px,
    transparent 1px 3px
  );
  opacity:.25;
  animation: outerdarkScan 6s linear infinite;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:2;
}

/* subtle moving scan effect */
@keyframes outerdarkScan {
  0% { background-position-y:0; }
  100% { background-position-y:100%; }
}

/* make the title glow green */
.cc-banner--outerdark .cc-banner__title {
  color:#b4ffb4;
  text-shadow:0 0 12px rgba(0,100,90,.6),
              0 0 24px rgba(0,100,90,.4);
  z-index:3;
  position:relative;
}
/* === Outer Dark YouTube button (green CRT style) === */
.cc-banner--outerdark .cc-badge.youtube {
  background: rgba(0,255,120,.12);
  border: 1px solid rgba(0,255,128,.55);
  color: #b4ffb4;
  box-shadow:
    inset 0 0 14px rgba(0,255,128,.45),
    0 0 18px rgba(0,255,128,.35);
  transition: all .25s ease;
}

.cc-banner--outerdark .cc-badge.youtube:hover {
  background: rgba(0,255,128,.25);
  border-color: rgba(0,255,128,.85);
  color: #fff;
  box-shadow:
    inset 0 0 18px rgba(0,255,128,.65),
    0 0 26px rgba(0,255,128,.55);
  transform: translateY(-2px);
}

/* make icon match */
.cc-banner--outerdark .cc-badge.youtube img {
  filter: brightness(0) saturate(100%) invert(77%) sepia(19%) saturate(750%) hue-rotate(85deg) brightness(110%) contrast(92%);
}
/* --- Ensure logo is always above FX layers --- */
.logo-overlay{ z-index:30; }               /* higher than .fx (15) and gradient (16) */
.hero-overlay{ z-index:21; }               /* leave CTAs below the logo */

/* --- Kill the breathing animation during glitch so our filter is visible --- */
.hero-slideshow.glitching .logo-overlay img{
  animation: none !important;              /* cancel logoBreath */
}

/* --- Big, obvious CRT flash + RGB split for 520ms --- */
.hero-slideshow.glitching .logo-overlay img{
  /* make it pop on both dark & bright slides */
  mix-blend-mode: screen;
  filter:
    brightness(1.45) contrast(1.45) saturate(1.35)
    drop-shadow(0 0 12px rgba(255,255,255,.85))
    drop-shadow( 2px 0   0  rgba(0,180,255,.50))   /* cyan edge */
    drop-shadow(-2px 0   0  rgba(255,0, 80,.50));  /* magenta edge */
  transform: translate3d(0,0,0) scale(1.015);
  animation: logoGlitchPop .52s steps(3, end);
}

@keyframes logoGlitchPop{
  0%   { transform: translate(-1px,  1px) scale(1.02);   filter: brightness(1.6) contrast(1.6) saturate(1.4); }
  33%  { transform: translate( 1px, -1px) scale(1.01);   filter: brightness(1.45) contrast(1.45) saturate(1.35); }
  66%  { transform: translate(-1px, -1px) scale(1.015);  filter: brightness(1.5) contrast(1.5)  saturate(1.35); }
  100% { transform: translate( 0,  0 )   scale(1.015);   filter: brightness(1.45) contrast(1.45) saturate(1.35); }
}

/* --- Extra: stronger “banded” glitch on the incoming slide --- */
.hero-slideshow .slide.glitch-in{
  opacity:1; z-index:2;
  animation: slideGlitch .5s steps(2, start);
}
@keyframes slideGlitch{
  0%   { clip-path: inset(0 0 82% 0); transform: translate(-3px,  2px) scale(1.01); }
  18%  { clip-path: inset(12% 0 58% 0); transform: translate( 3px, -2px) scale(1.005); }
  36%  { clip-path: inset(22% 0 38% 0); transform: translate(-2px, -3px) scale(1.01); }
  54%  { clip-path: inset(42% 0 18% 0); transform: translate( 2px,  3px) scale(1.0); }
  72%  { clip-path: inset(0 0 82% 0);   transform: translate(-1px,  2px); }
  100% { clip-path: inset(0 0 0 0);     transform: none; }
}
/* keep logo above effects */
#hero .logo-overlay{ z-index: 30; }
#hero .hero-overlay{ z-index: 21; }

/* kill the breathing animation DURING the glitch so our filter shows */
#hero.glitching #heroLogo{
  animation: none !important;
}

/* make the glitch unmissable (RGB split + pop) */
#hero.glitching #heroLogo{
  mix-blend-mode: screen;
  filter:
    brightness(1.55) contrast(1.55) saturate(1.35)
    drop-shadow(0 0 14px rgba(255,255,255,.9))
    drop-shadow( 2px 0 0 rgba(0,180,255,.55))
    drop-shadow(-2px 0 0 rgba(255,0, 80,.55));
  transform: translate3d(0,0,0) scale(1.02);
  animation: heroLogoGlitch .52s steps(3, end);
}

@keyframes heroLogoGlitch{
  0%   { transform: translate(-1px, 1px)  scale(1.022); }
  33%  { transform: translate( 1px,-1px) scale(1.015); }
  66%  { transform: translate(-1px,-1px) scale(1.018); }
  100% { transform: translate( 0, 0)     scale(1.02);  }
}

/* incoming-slide banded glitch (kept) */
#hero .slide.glitch-in{
  opacity:1; z-index:2;
  animation: slideGlitch .5s steps(2, start);
}
@keyframes slideGlitch{
  0%   { clip-path: inset(0 0 82% 0); transform: translate(-3px,  2px) scale(1.01); }
  18%  { clip-path: inset(12% 0 58% 0); transform: translate( 3px, -2px) scale(1.005); }
  36%  { clip-path: inset(22% 0 38% 0); transform: translate(-2px, -3px) scale(1.01); }
  54%  { clip-path: inset(42% 0 18% 0); transform: translate( 2px,  3px) scale(1.0); }
  72%  { clip-path: inset(0 0 82% 0);   transform: translate(-1px,  2px); }
  100% { clip-path: inset(0 0 0 0);     transform: none; }
}
/* Tighten gap after the HERO slideshow (just this spot) */
section.hero.hero-slideshow#home {
  margin-bottom: 0 !important;
  padding-bottom: 6px !important;   /* tweak this number if you want tighter/looser */
}

/* In case the inner slideshow adds extra spacing */
section.hero.hero-slideshow#home .slideshow,
section.hero.hero-slideshow#home .slideshow-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* Kill any decorative divider/pseudo that might be creating height */
section.hero.hero-slideshow#home::after,
section.hero.hero-slideshow#home::before {
  content: none !important;
}

/* Make sure the next section doesn't add its own top gap */
section.hero.hero-slideshow#home + section#social.tvstack {
  margin-top: 8px !important;         /* small breathing room */
  padding-top: 8px !important;
}