/* ==========================================================
   EFFECTS + READABILITY  (loaded last on every page)
   Animations, hover/tap polish, small-text fixes, mobile menu.
   Everything here is disabled under prefers-reduced-motion.
   ========================================================== */

:root {
  --red-text: #f02828;            /* brighter red for SMALL text only (readable on black) */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

html { -webkit-tap-highlight-color: transparent; }
body { -webkit-font-smoothing: antialiased; }
html.menu-open, html.menu-open body { overflow: hidden; }

/* ---------- readability: bump tiny labels ---------- */
.section-label { font-size: .85rem; color: var(--red-text); }
.hero-eyebrow, .fighter-number, .fighter-style-label, .evidence-label { color: var(--red-text); }
.hero-eyebrow { font-size: .8rem; }
.fighter-number { font-size: .8rem; }
.fighter-style-label, .evidence-label { font-size: .75rem; }
.stat-label { font-size: .72rem; color: rgba(240,236,228,.7); }
.evidence-placeholder span { font-size: .7rem; color: rgba(240,236,228,.7); }
.merch-detail { font-size: .75rem; }
.contact-link-label { font-size: .7rem; }
.footer-copy { font-size: .7rem; }

/* ---------- page transitions: knife strike → whole-screen glitch + logo flash → new page ----------
   Markup (one per page, first thing in <body>): <div class="cut"> with .cut-bg, .cut-blade (slash + knife),
   .cut-logo, six .gl glitch slices and .cut-flash.
   LEAVE : a knife drags a clean slash across the whole screen → white flash → page glitches/shakes,
           the screen blacks out in flickers while the logo strobes at full-screen size.
   ARRIVE: the next page starts blacked-out with the logo strobing (class set in <head> before first paint),
           the black flickers off, glitch slices tear across, content jitters then settles.
   Pure CSS, no browser feature needed. Timings are in the keyframes below. */
.cut { position: fixed; inset: 0; z-index: 10000; pointer-events: none; visibility: hidden; overflow: hidden; }
html.leaving .cut, html.arriving .cut, html.intro .cut { visibility: visible; }
.cut > * { position: absolute; }

.cut-bg { inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, #2a0000 0, #050505 65%), #050505; }
.cut-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 4px); }

/* the knife strike: a wrapper rotated across the screen; slash line + knife share one timeline */
.cut-blade { inset: 0; opacity: 0; filter: drop-shadow(0 0 6px rgba(255, 40, 40, .9)) drop-shadow(0 6px 18px rgba(0, 0, 0, .8)); }
.cut-blade .slash { display: none; }
.cut-blade .knife { position: absolute; left: 0; top: 0; width: min(380px, 62vw); height: auto; transform-origin: 0 0; will-change: transform; }
.cut-tear { inset: 0; width: 100%; height: 100%; z-index: 1; }

.cut-logo { left: 50%; top: 50%; width: min(460px, 68vw); max-width: none; height: auto; transform: translate(-50%, -50%) rotate(-5deg); opacity: 0;
  filter: drop-shadow(0 0 30px rgba(255, 30, 30, .95)) drop-shadow(0 0 90px rgba(210, 0, 0, .9)) brightness(1.15); }


.cut-flash { inset: 0; background: #fff; opacity: 0; mix-blend-mode: normal; }

/* ---- LEAVE (≈0.55s): knife strike → flash → data-corruption glitch (JS-driven, see site.js) + logo strobe ---- */
html.leaving .cut-blade { animation: bladeLife .62s both; }
html.leaving .cut-flash { animation: flashHit .38s both; }
html.leaving .cut-bg { animation: bgIn .36s .3s steps(1, end) both; }
html.leaving .cut-logo { animation: logoStrobeIn .34s .34s steps(1, end) both; }
/* the tear canvas stays up through the glitch; on the next page it blinks out with the black-out */

/* ---- ARRIVE (≈0.55s): starts blacked-out + logo strobing, corruption burns off to reveal the page ---- */
html.arriving .cut-bg { opacity: 1; animation: bgOut .5s .02s steps(1, end) both; }
html.arriving .cut-logo { animation: logoStrobeOut .46s steps(1, end) both; }
html.arriving .cut-tear { animation: bgOut .5s .02s steps(1, end) both; }

/* signal noise + scanlines over everything while the cut is active */
.cut::after { content: ''; position: absolute; inset: -10%; z-index: 4; pointer-events: none; opacity: .14;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px);
  animation: noiseJump .16s steps(3) infinite; }
@keyframes noiseJump { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -4%); } 100% { transform: translate(-1%, 3%); } }
/* JS-spawned corruption blocks */

@keyframes bladeLife { 0% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flashHit  { 0%, 30% { opacity: 0; } 36% { opacity: .9; } 60% { opacity: .2; } 100% { opacity: 0; } }
@keyframes bgIn { 0% { opacity: 0; } 12% { opacity: 1; } 28% { opacity: .35; } 44% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bgOut { 0% { opacity: 1; } 40% { opacity: 1; } 46% { opacity: 0; } 54% { opacity: 1; } 62% { opacity: .15; } 70% { opacity: .7; } 78% { opacity: 0; } 100% { opacity: 0; } }
@keyframes logoStrobeIn  { 0% { opacity: 0; } 10% { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg) scale(1.04); } 24% { opacity: .1; } 38% { opacity: 1; transform: translate(-48%, -51%) rotate(-3deg) scale(1); } 52% { opacity: .35; } 66% { opacity: 1; transform: translate(-52%, -49%) rotate(-6deg) scale(1.06); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg) scale(1); } }
@keyframes logoStrobeOut { 0% { opacity: 1; } 12% { opacity: .15; } 24% { opacity: 1; transform: translate(-49%, -50%) rotate(-3deg) scale(1.05); } 38% { opacity: .3; } 52% { opacity: 1; transform: translate(-51%, -51%) rotate(-6deg) scale(1.1); } 70% { opacity: 0; } 100% { opacity: 0; } }

/* ---------- scroll progress bar (sits on the nav's bottom edge) ---------- */
.progress { position: fixed; left: 0; right: 0; top: calc(1.8rem + 4rem - 2px); height: 2px; background: var(--red); box-shadow: 0 0 12px var(--red), 0 0 24px rgba(167,0,0,.6); transform-origin: left; transform: scaleX(var(--p, 0)); z-index: 101; pointer-events: none; }
@media (max-width: 768px) { .progress { top: calc(1.6rem + 4rem - 2px); } }

/* ---------- nav polish ---------- */
.nav-logo img { animation: logoFlicker 8s infinite; }
@keyframes logoFlicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .35; } 94% { opacity: 1; } 96% { opacity: .5; } 97% { opacity: 1; } }
nav ul a { position: relative; padding: .3rem 0; }
nav ul a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--red); box-shadow: 0 0 10px var(--red); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
nav ul a:hover::after, nav ul a.active::after { transform: scaleX(1); transform-origin: left; }

/* ---------- mobile menu: slide/fade with staggered links ---------- */
.mobile-menu { display: flex; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; background: radial-gradient(ellipse at 50% 30%, rgba(167,0,0,.22), var(--black) 70%); }
.mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.mobile-menu a { opacity: 0; transform: translateY(28px) skewY(2deg); transition: opacity .45s var(--ease), transform .45s var(--ease), color .2s; }
.mobile-menu.open a { opacity: 1; transform: none; }
.mobile-menu a:nth-of-type(1) { transition-delay: .08s, .08s, 0s; }
.mobile-menu a:nth-of-type(2) { transition-delay: .14s, .14s, 0s; }
.mobile-menu a:nth-of-type(3) { transition-delay: .20s, .20s, 0s; }
.mobile-menu a:nth-of-type(4) { transition-delay: .26s, .26s, 0s; }
.mobile-menu a:nth-of-type(5) { transition-delay: .32s, .32s, 0s; }
.mobile-close { display: none; }
.hamburger { padding: 12px 8px; margin: -8px -8px; }
.hamburger span { transform-origin: center; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--red); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--red); }

/* ---------- buttons: slash sweep + press feedback ---------- */
.btn { position: relative; overflow: hidden; transition: background .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); }
.btn:active { transform: scale(.96); }
.btn-primary { box-shadow: 0 0 0 rgba(167,0,0,0); animation: btnPulse 2.6s 2s ease-in-out infinite; }
@keyframes btnPulse { 0%, 100% { box-shadow: 0 0 0 rgba(167,0,0,0); } 50% { box-shadow: 0 0 26px rgba(167,0,0,.7); } }
@media (hover: hover) {
  .btn:hover { transform: translateY(-3px); }
  .btn:hover::after { animation: btnShine .7s var(--ease); }
  .btn-primary:hover { box-shadow: 0 6px 30px rgba(167,0,0,.7); }
}
@keyframes btnShine { to { left: 130%; } }

/* ---------- scroll reveal (classes added by js/site.js) ---------- */
.reveal { opacity: 0; }
.reveal.in { opacity: 1; animation: revealUp .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes revealUp { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
.reveal.from-left.in { animation-name: revealLeft; }
@keyframes revealLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }

/* ---------- pointer spotlight on cards (set by js) ---------- */
@media (hover: hover) {
  .spot { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(167,0,0,.16), transparent 60%); }
}

/* ---------- hero (home) ---------- */
.hero { isolation: isolate; }
.hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(0,0,0,.75) 100%); pointer-events: none; z-index: 1; }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-bg-logo img { opacity: .09; filter: drop-shadow(0 0 40px rgba(167,0,0,.6)); animation: logoFloat 9s ease-in-out infinite; will-change: transform; }
@keyframes logoFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.03); } }
.hero-title { position: relative; animation: fadeUp .7s .4s ease forwards, glowPulse 4s 1.4s ease-in-out infinite; }
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 60px rgba(167,0,0,.5), 0 0 120px rgba(167,0,0,.2), 2px 2px 0 #000; }
  50%      { text-shadow: 0 0 80px rgba(240,40,40,.8), 0 0 160px rgba(167,0,0,.45), 2px 2px 0 #000; }
}
.hero-title::before, .hero-title::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; opacity: 0; }
.hero-title::before { color: var(--white); animation: glitchA 5.5s 2s infinite steps(1); }
.hero-title::after  { color: #ff2a2a;      animation: glitchB 5.5s 2s infinite steps(1); }
@keyframes glitchA {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  91% { opacity: .8; transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); }
  93% { opacity: .8; transform: translate(5px, -2px); clip-path: inset(60% 0 8% 0); }
  95% { opacity: .8; transform: translate(-3px, 0);  clip-path: inset(35% 0 35% 0); }
  97% { opacity: 0; }
}
@keyframes glitchB {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  92% { opacity: .85; transform: translate(6px, -2px); clip-path: inset(50% 0 20% 0); }
  94% { opacity: .85; transform: translate(-5px, 2px); clip-path: inset(5% 0 70% 0); }
  96% { opacity: .85; transform: translate(3px, 0);   clip-path: inset(75% 0 3% 0); }
  98% { opacity: 0; }
}
.scroll-cue { position: absolute; left: 50%; bottom: 1.6rem; z-index: 2; width: 22px; height: 36px; border: 1px solid rgba(240,236,228,.35); border-radius: 12px; transform: translateX(-50%); opacity: 0; animation: fadeUp .6s 2s ease forwards; }
.scroll-cue::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--red); box-shadow: 0 0 8px var(--red); animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- marquee band (home) ---------- */
.marquee { overflow: hidden; border-top: 1px solid rgba(167,0,0,.35); border-bottom: 1px solid rgba(167,0,0,.35); padding: 1rem 0; background: linear-gradient(90deg, rgba(167,0,0,.1), transparent 30%, transparent 70%, rgba(167,0,0,.1)); white-space: nowrap; }
.marquee-track { display: inline-flex; animation: marquee 28s linear infinite; }
.marquee-track span { font-family: var(--carnage); font-size: clamp(34px, 7vw, 84px); line-height: 1; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1px rgba(240,236,228,.55); padding: 0 1.2rem; }
.marquee-track span.hot { color: var(--red); -webkit-text-stroke: 0; text-shadow: 0 0 30px rgba(167,0,0,.7); }
.marquee.rev .marquee-track { animation-direction: reverse; animation-duration: 34s; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- fighters / manifesto / merch / contact extras ---------- */
.fighter-block { transition: border-color .3s, box-shadow .4s; }
@media (hover: hover) { .fighter-block:hover { box-shadow: 0 0 50px rgba(167,0,0,.18); } }
.stat-block { transition: background .25s, transform .25s var(--ease); }
@media (hover: hover) { .stat-block:hover { background: rgba(167,0,0,.1); transform: translateY(-2px); } }
.stat-block:active { background: rgba(167,0,0,.14); }
.evidence-placeholder.wide { grid-column: 1 / -1; aspect-ratio: auto; padding: 2.4rem 1rem; flex-direction: row; gap: 1rem; }
.evidence-placeholder.wide span { font-size: .8rem; letter-spacing: .3em; }
.evidence-grid { animation: tabIn .5s var(--ease); }
@keyframes tabIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.play-icon { animation: playPulse 2.2s ease-in-out infinite; }
@keyframes playPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(167,0,0,.5); } 50% { box-shadow: 0 0 0 10px rgba(167,0,0,0); } }

.anti-item { overflow: hidden; }
/* knife slash: a tapered cut (sharp at both ends) with a white-hot core, angled across the text.
   it snaps open fast, then the wound glows red and fades. */
.anti-item::after { content: ''; position: absolute; left: -2%; top: calc(50% - 9px); width: 104%; height: 18px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 8%, #8a0000 28%, #ff2a2a 42%, #fff 50%, #ff2a2a 58%, #8a0000 72%, transparent 92%);
  clip-path: polygon(0 55%, 6% 47%, 22% 40%, 48% 36%, 74% 40%, 92% 46%, 100% 49%, 93% 54%, 76% 60%, 50% 64%, 24% 61%, 7% 57%);
  transform: rotate(-3deg) scaleX(0); transform-origin: left center; }
.anti-item.in::after { animation: knifeSlash 1.6s calc(.5s + var(--i, 0) * 80ms) cubic-bezier(.2, .9, .1, 1) both; }
@keyframes knifeSlash {
  0%   { opacity: 1; transform: rotate(-3deg) scaleX(0); filter: brightness(2); }
  14%  { opacity: 1; transform: rotate(-3deg) scaleX(1); filter: brightness(2.2); }
  30%  { opacity: 1; transform: rotate(-3deg) scaleX(1) scaleY(1.5); filter: brightness(1); }
  100% { opacity: 0; transform: rotate(-3deg) scaleX(1) scaleY(.6); filter: brightness(.7); }
}
@media (hover: hover) { .anti-item:hover { transform: translateX(6px); } }
.anti-item { transition: background .2s, color .2s, transform .3s var(--ease); }
.manifesto-body blockquote { position: relative; }
.manifesto-body blockquote::before { content: ''; position: absolute; left: -2px; top: 0; width: 2px; height: 100%; background: var(--red); box-shadow: 0 0 14px var(--red); animation: barGlow 2.5s ease-in-out infinite; }
@keyframes barGlow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.merch-card { position: relative; transition: border-color .3s, transform .4s var(--ease), box-shadow .4s; }
.merch-img img { transition: transform .8s var(--ease); }
@media (hover: hover) { .merch-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(167,0,0,.25); } .merch-card:hover .merch-img img { transform: scale(1.06); } }
.merch-price { text-shadow: 0 0 18px rgba(167,0,0,.6); }
.merch-note { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }

.contact-link { transition: border-color .25s, background .25s, transform .3s var(--ease); }
@media (hover: hover) { .contact-link:hover { transform: translateX(8px); } }
.contact-link:active { transform: scale(.98); background: rgba(167,0,0,.12); }
.social-icon { transition: transform .4s var(--ease), filter .3s; }
@media (hover: hover) { .contact-link:hover .social-icon { transform: scale(1.2) rotate(-8deg); filter: drop-shadow(0 0 8px var(--red)); } }
.contact-heading { animation: glowPulse 4s ease-in-out infinite; }

/* ---------- blood splatter canvas (tap / click anywhere) ---------- */
.splat { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9998; pointer-events: none; }

/* ---------- home page sections ---------- */
.home-section { max-width: 1100px; margin: 0 auto; padding: 5rem 3rem 1rem; }
.home-title { font-family: var(--carnage); font-size: clamp(34px, 6vw, 72px); line-height: .95; color: var(--white); margin-bottom: 2.5rem; text-shadow: 0 0 30px rgba(240,236,228,.18); }
.home-title em { font-style: normal; color: var(--red); text-shadow: 0 0 30px rgba(167,0,0,.7); }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.home-card { display: flex; flex-direction: column; gap: .35rem; position: relative; overflow: hidden; text-decoration: none; color: var(--white); padding: 2rem; border: 1px solid rgba(167,0,0,.3); background-color: rgba(167,0,0,.03); transition: border-color .3s, transform .4s var(--ease), box-shadow .4s; }
.home-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--red); box-shadow: 0 0 14px var(--red); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.home-card:active::before { transform: scaleX(1); }
@media (hover: hover) { .home-card:hover { border-color: var(--red); transform: translateY(-6px); box-shadow: 0 20px 60px rgba(167,0,0,.22); } .home-card:hover::before { transform: scaleX(1); } .home-card:hover .hc-go { transform: translateX(8px); } }
.hc-num { font-family: var(--hyde); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--red-text); }
.hc-name { font-family: var(--carnage); font-size: clamp(30px, 4vw, 52px); line-height: .95; margin-top: .4rem; text-shadow: 0 0 20px rgba(240,236,228,.3); }
.hc-nick { font-family: var(--bleeding); font-size: clamp(26px, 3.4vw, 40px); color: var(--red); text-shadow: 0 0 15px rgba(167,0,0,.8), 0 0 35px rgba(167,0,0,.4); }
.hc-meta { font-family: var(--hyde); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(240,236,228,.8); margin-top: .6rem; }
.hc-go { font-family: var(--carnage); font-size: 1.4rem; color: var(--red-text); margin-top: 1.2rem; transition: transform .35s var(--ease); }

.drop { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.drop-img { aspect-ratio: 3/4; overflow: hidden; border: 1px solid rgba(240,236,228,.1); position: relative; }
.drop-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .9s var(--ease); }
.drop-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,6,.7), transparent 55%); }
@media (hover: hover) { .drop:hover .drop-img img { transform: scale(1.06); } }
.drop-text .hc-num { display: block; margin-bottom: 1rem; }
.drop-price { font-family: var(--carnage); font-size: clamp(34px, 5vw, 60px); color: var(--red); text-shadow: 0 0 18px rgba(167,0,0,.6); margin: 1rem 0 1.8rem; }
.drop-text p { font-family: var(--jekyll); font-size: 1.15rem; line-height: 1.9; margin-bottom: .6rem; }

.cta-band { text-align: center; padding: 6rem 1.5rem 5rem; }
.cta-band .home-title { margin-bottom: 2rem; }
.cta-band .btn + .btn { margin-left: .8rem; }

@media (max-width: 768px) {
  .home-section { padding: 3.5rem 1.5rem .5rem; }
  .home-grid, .drop { grid-template-columns: 1fr; gap: 1.2rem; }
  .drop { gap: 2rem; }
  .cta-band .btn { display: block; margin: .8rem auto 0 !important; max-width: 280px; }
  .marquee { padding: .7rem 0; }
}

/* ---------- accessibility: no motion if the user asks for none ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; }
  .embers, .splat { display: none; }
}

/* ---------- flags (SVG so they render on Windows too) ---------- */
.flag { display: inline-block; height: 1em; width: auto; aspect-ratio: 3 / 2; vertical-align: -.12em; margin-right: .45em; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(240,236,228,.25), 0 2px 6px rgba(0,0,0,.6); }
.stat-value .flag { height: .85em; }
.fighter-number .flag, .hc-num .flag { height: 1.05em; }

/* ---------- middle-finger cursor (mouse only; touch screens have no cursor) ---------- */
body { cursor: url('../assets/cursor/finger.png') 8 0, crosshair; }
a, button, .btn, .ev-tab, .hamburger, .contact-link, .home-card, .merch-card a { cursor: url('../assets/cursor/finger-red.png') 8 0, pointer; }


/* ---------- FIRST-VISIT INTRO: VHS tape lock-in (once per visit; class "intro" is set in <head> before first paint) ----------
   tape snow + scanlines · tracking bands roll down · the picture VERTICALLY ROLLS into place · chroma bleed (RGB offset) + tearing +
   soft horizontal blur ramp down to clean (burst(..., {vhs:true}) in js/site.js) · head-switching noise strip at the bottom · "PLAY ▶" OSD + date stamp.
   Page animations are paused until "intro-go" (0.25s). Click / tap / any key skips. Everything is gone by ~1.75s. */
html.intro .cut { visibility: visible; }
html.intro .cut-bg { opacity: 1; background: #030303; animation: introBlack .8s .2s steps(1, end) both; }
html.intro .cut-bg::after, html.intro .cut::after, html.intro .cut-logo, html.intro .cut-tear, html.intro .cut-blade, html.intro .cut-flash { display: none; }
html.intro:not(.intro-go) body > :not(.cut), html.intro:not(.intro-go) body > :not(.cut) * { animation-play-state: paused !important; }
@keyframes introBlack { 0%, 12% { opacity: 1; } 16% { opacity: 0; } 24% { opacity: 1; } 30% { opacity: .25; } 38% { opacity: .9; } 46% { opacity: 0; } 54% { opacity: .5; } 60%, 100% { opacity: 0; } }
/* vertical roll as the picture locks in (page content only; the fixed nav stays put) */
html.intro :is(.hero, .page-content, .marquee, .home-section, .cta-band, footer) { animation: vhsRoll 1.15s steps(1, end) both; }
@keyframes vhsRoll { 0% { transform: translateY(-18vh) scaleY(1.07); } 7% { transform: translateY(13vh); } 14% { transform: translateY(-8vh); } 22% { transform: translateY(5vh); } 32% { transform: translateY(-2.5vh); } 44% { transform: translateY(1.2vh); } 58% { transform: translateY(-.4vh); } 74%, 100% { transform: none; } }

.vhs { display: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
html.intro .vhs { display: block; }
.vhs::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); animation: vhsFade 1.6s ease-out both; }
@keyframes vhsFade { 0% { opacity: 1; } 70% { opacity: .7; } 100% { opacity: 0; } }
.vhs-snow { position: absolute; inset: -10%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1.4 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: vhsSnow .1s steps(4) infinite, vhsSnowFade 1.6s ease-out both; }
@keyframes vhsSnow { 0% { transform: translate(0, 0); } 25% { transform: translate(-4%, 3%); } 50% { transform: translate(3%, -5%); } 75% { transform: translate(-2%, 4%); } }
@keyframes vhsSnowFade { 0% { opacity: .9; } 16% { opacity: .5; } 34% { opacity: .7; } 50% { opacity: .22; } 100% { opacity: .05; } }
.vhs-band { position: absolute; left: 0; right: 0; top: 0; height: 11vh; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, .08) 70%, transparent); animation: vhsTrack 1.25s .15s cubic-bezier(.45, .05, .55, .95) both; }
.vhs-band.b2 { height: 6vh; animation-delay: .5s; animation-duration: .9s; }
@keyframes vhsTrack { 0% { opacity: 1; transform: translateY(-14vh); } 100% { opacity: .6; transform: translateY(112vh); } }
.vhs-head { position: absolute; left: 0; right: 0; bottom: 0; height: 6.5vh; transform-origin: bottom; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .3) 0 1px, rgba(0, 0, 0, .55) 1px 3px), linear-gradient(90deg, rgba(255, 0, 0, .15), rgba(0, 120, 255, .15)); animation: vhsHead 1.3s steps(1, end) both; }
@keyframes vhsHead { 0% { transform: skewX(-18deg) translateX(-30px); opacity: 1; } 10% { transform: skewX(12deg) translateX(24px); } 20% { transform: skewX(-8deg) translateX(-10px); } 30% { transform: skewX(5deg) translateX(8px); } 45% { transform: skewX(-2deg); } 60% { transform: none; opacity: .8; } 80% { opacity: .4; } 100% { opacity: 0; } }
.vhs-osd { position: absolute; font-family: var(--hyde); text-transform: uppercase; color: #fff; font-size: clamp(.95rem, 2.6vw, 1.6rem); letter-spacing: .22em; opacity: 0;
  text-shadow: -2px 0 rgba(255, 30, 30, .85), 2px 0 rgba(0, 170, 255, .85), 0 0 10px rgba(255, 255, 255, .55); animation: vhsOsd 1.6s steps(1, end) both; }
.vhs-osd.tl { left: clamp(18px, 5vw, 60px); top: 4.5rem; } .vhs-osd.tl i { font-style: normal; margin-left: .35em; }
.vhs-osd.br { right: clamp(18px, 5vw, 60px); bottom: clamp(22px, 8vh, 70px); font-size: clamp(.8rem, 2.2vw, 1.2rem); }
@keyframes vhsOsd { 0% { opacity: 0; } 12% { opacity: 1; } 20% { opacity: .2; } 26% { opacity: 1; } 74% { opacity: 1; } 82% { opacity: .3; } 88% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- jump-to-fighter from the home page ---------- */
.fighter-block { scroll-margin-top: 8rem; }
@media (max-width: 768px) { .fighter-block { scroll-margin-top: 7.2rem; } }

/* ---------- marquee ----------
   "You want em gone?"  → constantly electrocuted: jittering, flickering, RGB (cyan/red) split slices (BZZZT)
   "You call Slasher Inc."  → calm: glows and pulses, no glitch.   (data-text on each span is set by JS) */
.marquee-track span { position: relative; display: inline-block; }
.marquee-track span:not(.hot) { animation: zapBase 1.3s steps(1, end) infinite; -webkit-text-stroke-width: 1.4px;
  text-shadow: 0 0 10px rgba(255, 255, 255, .55), 0 0 24px rgba(255, 42, 42, .55); }
.marquee-track span:not(.hot)::before, .marquee-track span:not(.hot)::after { content: attr(data-text); position: absolute; left: 1.2rem; top: 0; right: 1.2rem; white-space: nowrap; pointer-events: none; color: transparent; mix-blend-mode: screen; }
.marquee-track span:not(.hot)::before { -webkit-text-stroke: 1.5px #ffffff; animation: zapA 1.05s steps(1, end) infinite; }
.marquee-track span:not(.hot)::after  { -webkit-text-stroke: 1.6px #ff2a2a; animation: zapB 1.6s steps(1, end) infinite; }
.marquee-track span.hot::before, .marquee-track span.hot::after { content: attr(data-text); position: absolute; left: 1.2rem; top: 0; right: 1.2rem; white-space: nowrap; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.marquee-track span.hot::before { color: #ffffff; animation: hotA 2.4s steps(1, end) infinite; }
.marquee-track span.hot::after { color: #ff6a6a; animation: hotB 2.4s .04s steps(1, end) infinite; }
.marquee-track span.hot:nth-child(2n)::before, .marquee-track span.hot:nth-child(2n)::after { animation-delay: -1.2s; }
.marquee-track span.hot:nth-child(2n) { animation-delay: 0s, -1.2s; }
.marquee-track span.hot { animation: hotGlow 2s ease-in-out infinite, hotJit 2.4s steps(1, end) infinite; }
@keyframes hotGlow {
  0%, 100% { text-shadow: 0 0 22px rgba(167, 0, 0, .75), 0 0 50px rgba(167, 0, 0, .35); filter: brightness(1); }
  50%      { text-shadow: 0 0 34px rgba(255, 40, 40, .95), 0 0 80px rgba(220, 0, 0, .6), 0 0 130px rgba(167, 0, 0, .35); filter: brightness(1.25); } }
@keyframes zapBase {
  0.0% { transform: translate(-4.0px, 2.1px) skewX(-3.8deg) scaleY(0.96); opacity: 1; filter: brightness(1); }
  7.1% { transform: translate(-1.4px, 1.3px) skewX(4.6deg) scaleY(1.01); opacity: 1; filter: brightness(1); }
  14.3% { transform: translate(2.5px, -1.3px) skewX(-2.3deg) scaleY(1.03); opacity: 1; filter: brightness(2.1); }
  21.4% { transform: translate(-0.3px, 2.1px) skewX(5.5deg) scaleY(0.95); opacity: 1; filter: brightness(1); }
  28.6% { transform: translate(1.5px, 0.7px) skewX(1.4deg) scaleY(1.06); opacity: 1; filter: brightness(1); }
  35.7% { transform: translate(-1.3px, 1.7px) skewX(-3.0deg) scaleY(0.95); opacity: 0.63; filter: brightness(2.3); }
  42.9% { transform: translate(0.5px, 1.1px) skewX(6.8deg) scaleY(0.94); opacity: 0.67; filter: brightness(1); }
  50.0% { transform: translate(-0.6px, -1.5px) skewX(7.4deg) scaleY(0.94); opacity: 1; filter: brightness(2.1); }
  57.1% { transform: translate(3.4px, 0.1px) skewX(-6.0deg) scaleY(0.99); opacity: 0.61; filter: brightness(1); }
  64.3% { transform: translate(-1.3px, 0.2px) skewX(2.1deg) scaleY(0.96); opacity: 1; filter: brightness(1); }
  71.4% { transform: translate(2.9px, 0.7px) skewX(2.4deg) scaleY(1.00); opacity: 1; filter: brightness(1); }
  78.6% { transform: translate(3.5px, -0.5px) skewX(3.7deg) scaleY(0.97); opacity: 1; filter: brightness(1); }
  85.7% { transform: translate(-1.4px, -0.5px) skewX(5.3deg) scaleY(1.05); opacity: 0.75; filter: brightness(1.9); }
  92.9% { transform: translate(-2.8px, -2.1px) skewX(8.9deg) scaleY(0.96); opacity: 1; filter: brightness(2.0); }
  100% { transform: translate(0.7px, -1.8px) skewX(7.6deg) scaleY(1.05); opacity: 1; filter: brightness(1); } }
@keyframes zapA {
  0.0% { transform: translate(-4.9px, -2.0px); clip-path: inset(64% 0 23% 0); opacity: 1; }
  7.7% { transform: translate(2.6px, -1.1px); clip-path: inset(5% 0 0% 0); opacity: 1; }
  15.4% { transform: translate(-5.8px, 1.5px); clip-path: inset(34% 0 41% 0); opacity: 1; }
  23.1% { transform: translate(-8.4px, -0.0px); clip-path: inset(26% 0 61% 0); opacity: 0; }
  30.8% { transform: translate(9.3px, -1.9px); clip-path: inset(64% 0 19% 0); opacity: 1; }
  38.5% { transform: translate(1.4px, 0.7px); clip-path: inset(13% 0 78% 0); opacity: 1; }
  46.2% { transform: translate(1.4px, -1.8px); clip-path: inset(16% 0 16% 0); opacity: 1; }
  53.8% { transform: translate(-0.0px, -1.9px); clip-path: inset(49% 0 32% 0); opacity: 0; }
  61.5% { transform: translate(4.1px, 1.6px); clip-path: inset(64% 0 4% 0); opacity: 0; }
  69.2% { transform: translate(10.8px, 1.8px); clip-path: inset(62% 0 28% 0); opacity: 1; }
  76.9% { transform: translate(5.0px, 1.5px); clip-path: inset(29% 0 16% 0); opacity: 1; }
  84.6% { transform: translate(8.5px, 0.2px); clip-path: inset(16% 0 31% 0); opacity: 1; }
  92.3% { transform: translate(-3.6px, 0.9px); clip-path: inset(44% 0 37% 0); opacity: 1; }
  100% { transform: translate(10.7px, 2.0px); clip-path: inset(14% 0 25% 0); opacity: 1; } }
@keyframes zapB {
  0.0% { transform: translate(-6.6px, 0.6px); clip-path: inset(61% 0 30% 0); opacity: 1; }
  9.1% { transform: translate(6.0px, 1.8px); clip-path: inset(35% 0 33% 0); opacity: 1; }
  18.2% { transform: translate(-7.3px, 0.7px); clip-path: inset(13% 0 36% 0); opacity: 1; }
  27.3% { transform: translate(5.7px, -0.6px); clip-path: inset(39% 0 28% 0); opacity: 1; }
  36.4% { transform: translate(0.9px, -1.2px); clip-path: inset(2% 0 28% 0); opacity: 1; }
  45.5% { transform: translate(3.5px, -0.3px); clip-path: inset(20% 0 17% 0); opacity: 0; }
  54.5% { transform: translate(9.1px, 1.6px); clip-path: inset(54% 0 33% 0); opacity: 1; }
  63.6% { transform: translate(5.8px, 0.4px); clip-path: inset(67% 0 1% 0); opacity: 1; }
  72.7% { transform: translate(-8.0px, -1.7px); clip-path: inset(63% 0 1% 0); opacity: 0; }
  81.8% { transform: translate(2.3px, 1.8px); clip-path: inset(6% 0 1% 0); opacity: 1; }
  90.9% { transform: translate(3.8px, -1.0px); clip-path: inset(9% 0 17% 0); opacity: 1; }
  100% { transform: translate(3.8px, 1.1px); clip-path: inset(70% 0 10% 0); opacity: 1; } }

/* ---------- neon-outline white text (no glitch) ----------
   Tier A (big display text): solid white letters with a soft red neon glow (not hollow — readability).
   Tier B (body / small text): keeps its white fill for legibility, with a thin white outline + red glow.
   Red words (em / .hl-red / links) are reset so they stay clean red. */
:root { --neon: #ffffff; }
.home-title, .hc-name, .fighter-name, .merch-name, .manifesto-heading em, .contact-heading em, .contact-link-value, .stat-value, .hero-sub, .mobile-menu a {
  color: var(--white); -webkit-text-stroke: 0;
  text-shadow: 0 0 1px rgba(255, 255, 255, .8), 0 0 10px rgba(255, 42, 42, .55), 0 0 24px rgba(255, 42, 42, .3); }
.mobile-menu a:hover, .mobile-menu a.active { color: rgba(167, 0, 0, .35); -webkit-text-stroke-color: #ff5a4a; }
nav ul a, .fighter-bio, .fighter-style, .manifesto-body p, .anti-item, .drop-text p, .hc-meta, .fighter-division-weight, .fighter-division-sports, .stat-label, .merch-detail,
.contact-link-label, .footer-copy, .btn-ghost, .merch-note span {
  -webkit-text-stroke: .25px rgba(255, 255, 255, .75); text-shadow: 0 0 7px rgba(255, 42, 42, .4); }
.anti-item:hover { -webkit-text-stroke-color: rgba(255, 90, 70, .9); }
nav ul a:hover, nav ul a.active { -webkit-text-stroke-color: rgba(255, 90, 70, .9); }
/* keep red / accent words clean */
.home-title em, .hl-red, .hl-both, .manifesto-body strong, .manifesto-body a, .hero-sub span, .fighter-nickname, .hc-nick, .drop-price, .merch-price, .section-label, .fighter-number, .hc-num, .hc-go,
.hero-eyebrow, .btn-primary, .fighter-style-label, .evidence-label, .fighter-username { -webkit-text-stroke: 0; }
.home-title em { text-shadow: 0 0 30px rgba(167, 0, 0, .7); }

/* ---------- nickname glow + glitch (fighter bios + home cards; data-text set by JS) ----------
   Constant pulsing red glow; every few seconds a quick burst of RGB-split slices + jitter. */
.fighter-nickname, .hc-nick { position: relative; display: block; width: fit-content; animation: nickGlow 2.6s ease-in-out infinite, nickJit 3.4s steps(1, end) infinite; }
.fighter-nickname::before, .fighter-nickname::after, .hc-nick::before, .hc-nick::after { content: attr(data-text); position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; opacity: 0; mix-blend-mode: screen; text-shadow: none; }
.fighter-nickname::before, .hc-nick::before { color: #ffffff; animation: nickA 3.4s steps(1, end) infinite; }
.fighter-nickname::after, .hc-nick::after { color: #ff5a4a; animation: nickB 3.4s .05s steps(1, end) infinite; }
.fighter-block:nth-of-type(2) .fighter-nickname, .home-card:nth-child(2) .hc-nick { animation-delay: -1.1s, -1.7s; }
.fighter-block:nth-of-type(2) .fighter-nickname::before, .home-card:nth-child(2) .hc-nick::before { animation-delay: -1.7s; }
.fighter-block:nth-of-type(2) .fighter-nickname::after, .home-card:nth-child(2) .hc-nick::after { animation-delay: -1.65s; }
@keyframes nickGlow {
  0%, 100% { text-shadow: 0 0 12px rgba(167, 0, 0, .75), 0 0 30px rgba(167, 0, 0, .4); }
  50%      { text-shadow: 0 0 22px rgba(255, 50, 40, 1), 0 0 52px rgba(220, 0, 0, .75), 0 0 90px rgba(167, 0, 0, .45); } }
@keyframes nickJit { 0%, 100% { transform: none; } 90% { transform: translateX(-3px) skewX(-6deg); } 92% { transform: translateX(4px) skewX(5deg); } 94% { transform: translateX(-2px); } 96% { transform: none; } }
@keyframes nickA { 0%, 100% { opacity: 0; } 90% { opacity: 1; transform: translate(-5px, 0); clip-path: inset(10% 0 55% 0); } 92% { opacity: 1; transform: translate(4px, 1px); clip-path: inset(50% 0 10% 0); } 94% { opacity: 1; transform: translate(-3px, 0); clip-path: inset(25% 0 40% 0); } 96% { opacity: 0; } }
@keyframes nickB { 0%, 100% { opacity: 0; } 91% { opacity: 1; transform: translate(5px, 0); clip-path: inset(40% 0 25% 0); } 93% { opacity: 1; transform: translate(-4px, -1px); clip-path: inset(0 0 70% 0); } 95% { opacity: 1; transform: translate(3px, 0); clip-path: inset(65% 0 5% 0); } 97% { opacity: 0; } }


/* ---------- motion blur ----------
   · the shutters fly open with vertical streaking that sharpens as they slow
   · the knife is smeared along its own axis while it drags across the screen
   · page content gets a horizontal whip-blur during the glitch burst (js/site.js: #wdMB) that settles to sharp */
html.leaving .cut-blade .knife { animation: knifeBlur .5s steps(1, end) both; }
@keyframes knifeBlur { 0% { filter: url(#mbH20); } 30% { filter: url(#mbH14); } 45% { filter: url(#mbH6); } 60% { filter: none; } 100% { filter: none; } }

/* ---------- fighters: hover (mouse) / tap (touch) → the name becomes  FIRST "Nickname" LAST  and all the text glitches ----------
   JS (js/site.js) splits the name into .fn-a / .fn-nick / .fn-b, toggles .glitching on the block, locks the name's height (no layout jump)
   and sets --fs / --fit so the longer swapped name fits on its line. */
:is(.fighter-name, .hc-name) .fn-nick { display: inline-block; font-size: 0; opacity: 0; margin: 0; transition: opacity .3s ease; font-family: var(--bleeding); letter-spacing: .02em; color: #ff4a3a; -webkit-text-stroke: 0; white-space: nowrap; position: relative; vertical-align: baseline;
  text-shadow: 0 0 14px rgba(255, 40, 30, .95), 0 0 34px rgba(167, 0, 0, .6); }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) { font-size: calc(var(--fs, 56px) * var(--fit, 1)); }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-nick { display: inline-block; font-size: 1em; opacity: 1; margin: 0 .1em 0 .28em; animation: fnGlitchIn .6s steps(1, end) both, fnJit 1.5s .65s steps(1, end) infinite, fnGlow 1.8s .65s ease-in-out infinite; }
.fighter-nickname, .hc-nick { max-height: 140px; }
:is(.fighter-block, .home-card).glitching :is(.fighter-nickname, .hc-nick) { opacity: 0; max-height: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; }
@keyframes fnIn { 0% { opacity: 0; transform: translateX(-14px) skewX(-14deg); } 12% { opacity: 1; transform: translateX(10px) skewX(10deg); } 24% { opacity: .15; } 36% { opacity: 1; transform: translateX(-6px) skewX(-6deg); } 56% { transform: translateX(3px); } 100% { opacity: 1; transform: none; } }
.fighter-block.glitching .fighter-name { animation: txGlitch 2.2s steps(1, end) infinite; }

:is(.fighter-block, .home-card).glitching .fighter-bio { animation-delay: -.7s; } :is(.fighter-block, .home-card).glitching .fighter-style { animation-delay: -1.4s; }
:is(.fighter-block, .home-card).glitching .stat-block:nth-child(odd) .stat-value { animation-delay: -1s; } :is(.fighter-block, .home-card).glitching .stat-block:nth-child(3n) .stat-label { animation-delay: -1.7s; }
:is(.fighter-block, .home-card).swap :is(.fighter-name, .hc-name) { animation: nameSwap .6s steps(1, end) 1, txGlitch 2.2s steps(1, end) .6s infinite; }
@keyframes txGlitch {
  0%, 100% { transform: none; text-shadow: 0 0 6px rgba(255, 42, 42, .35); }
  14% { text-shadow: -2px 0 rgba(255, 255, 255, .8), 2px 0 rgba(255, 42, 42, .8); }
  17% { transform: none; text-shadow: 0 0 6px rgba(255, 42, 42, .35); }
  52% { text-shadow: 2px 0 rgba(255, 255, 255, .75), -2px 0 rgba(255, 42, 42, .75); }
  55% { transform: none; text-shadow: 0 0 6px rgba(255, 42, 42, .35); }
  83% { transform: none; text-shadow: -1px 0 rgba(255, 255, 255, .6), 1px 0 rgba(255, 42, 42, .6); }
  86% { transform: none; text-shadow: 0 0 6px rgba(255, 42, 42, .35); } }
@keyframes nameSwap {
  0% { text-shadow: 5px 0 rgba(255, 255, 255, .95), -5px 0 rgba(255, 42, 42, .95); }
  14% { text-shadow: -5px 0 rgba(255, 255, 255, .95), 5px 0 rgba(255, 42, 42, .95); }
  28% { text-shadow: 0 0 6px rgba(255, 42, 42, .4); }
  42% { text-shadow: 4px 0 rgba(255, 255, 255, .9), -4px 0 rgba(255, 42, 42, .9); }
  58% { text-shadow: -2px 0 rgba(255, 255, 255, .8), 2px 0 rgba(255, 42, 42, .8); }
  74%, 100% { text-shadow: 0 0 6px rgba(255, 42, 42, .35); } }
@keyframes fnGlitchIn {
  0% { opacity: 0; }
  7% { opacity: 1; text-shadow: 7px 0 rgba(255, 255, 255, .95), -7px 0 rgba(255, 42, 42, .95); }
  15% { opacity: .1; }
  24% { opacity: 1; text-shadow: -6px 0 rgba(255, 255, 255, .95), 6px 0 rgba(255, 42, 42, .95); }
  36% { opacity: .35; }
  48% { opacity: 1; text-shadow: 4px 0 rgba(255, 255, 255, .9), -4px 0 rgba(255, 42, 42, .9); }
  64% { opacity: 1; text-shadow: -2px 0 rgba(255, 255, 255, .8), 2px 0 rgba(255, 42, 42, .8); }
  80%, 100% { opacity: 1; } }

/* "You call Slasher Inc." — slower glitch: one short burst per ~2.4s cycle (vs. the constant electrocution on the other line) */
@keyframes hotJit { 0%, 100% { transform: none; } 84% { transform: translateX(-3px) skewX(-5deg); } 86% { transform: translateX(4px) skewX(4deg); } 88% { transform: translateX(-2px); } 90% { transform: none; } }
@keyframes hotA { 0%, 100% { opacity: 0; } 84% { opacity: 1; transform: translate(-5px, 0); clip-path: inset(12% 0 55% 0); } 86% { opacity: 1; transform: translate(4px, 1px); clip-path: inset(52% 0 12% 0); } 88% { opacity: 1; transform: translate(-3px, 0); clip-path: inset(30% 0 38% 0); } 90% { opacity: 0; } }
@keyframes hotB { 0%, 100% { opacity: 0; } 85% { opacity: 1; transform: translate(5px, 0); clip-path: inset(42% 0 25% 0); } 87% { opacity: 1; transform: translate(-4px, -1px); clip-path: inset(0 0 72% 0); } 89% { opacity: 1; transform: translate(3px, 0); clip-path: inset(66% 0 4% 0); } 91% { opacity: 0; } }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name)[data-nowrap="1"] { white-space: nowrap; }

/* the in-between nickname glitches on its own: two RGB-split copies slice across it + jitter + a pulsing glow */
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-nick::before, :is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-nick::after { content: attr(data-text); position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; opacity: 0; mix-blend-mode: screen; -webkit-text-stroke: 0; text-shadow: none; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-nick::before { color: #ffffff; animation: fnA 1.5s .7s steps(1, end) infinite; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-nick::after { color: #ff5a4a; animation: fnB 1.5s .75s steps(1, end) infinite; }
@keyframes fnJit { 0%, 100% { opacity: 1; } 8% { opacity: .55; } 11% { opacity: 1; } 36% { opacity: .7; } 39% { opacity: 1; } 64% { opacity: .6; } 67% { opacity: 1; } 86% { opacity: .7; } 89% { opacity: 1; } }
@keyframes fnGlow { 0%, 100% { text-shadow: 0 0 10px rgba(255, 40, 30, .8), 0 0 26px rgba(167, 0, 0, .5); } 50% { text-shadow: 0 0 20px rgba(255, 70, 55, 1), 0 0 46px rgba(220, 0, 0, .75), 0 0 80px rgba(167, 0, 0, .4); } }
@keyframes fnA { 0%, 100% { opacity: 0; } 8% { opacity: 1; transform: translate(-6px, 0); clip-path: inset(8% 0 55% 0); } 11% { opacity: 1; transform: translate(5px, 1px); clip-path: inset(52% 0 8% 0); } 14% { opacity: 0; }
  36% { opacity: 1; transform: translate(6px, 0); clip-path: inset(28% 0 36% 0); } 39% { opacity: 1; transform: translate(-5px, 0); clip-path: inset(0 0 70% 0); } 42% { opacity: 0; }
  64% { opacity: 1; transform: translate(-6px, -1px); clip-path: inset(60% 0 4% 0); } 67% { opacity: 0; } 86% { opacity: 1; transform: translate(5px, 0); clip-path: inset(18% 0 48% 0); } 89% { opacity: 0; } }
@keyframes fnB { 0%, 100% { opacity: 0; } 9% { opacity: 1; transform: translate(6px, 0); clip-path: inset(40% 0 26% 0); } 12% { opacity: 1; transform: translate(-5px, -1px); clip-path: inset(0 0 74% 0); } 15% { opacity: 0; }
  37% { opacity: 1; transform: translate(-6px, 1px); clip-path: inset(62% 0 4% 0); } 40% { opacity: 1; transform: translate(5px, 0); clip-path: inset(12% 0 56% 0); } 43% { opacity: 0; }
  65% { opacity: 1; transform: translate(6px, 0); clip-path: inset(30% 0 36% 0); } 68% { opacity: 0; } 87% { opacity: 1; transform: translate(-5px, 0); clip-path: inset(52% 0 12% 0); } 90% { opacity: 0; } }

/* home roster cards: ONLY the name glitches (the rest of the card stays calm) */
.home-card.glitching .hc-name { animation: txGlitch 2.2s steps(1, end) infinite; }

/* the swapped-in nickname must not enlarge the name's line box (no layout shift on hover) */
:is(.fighter-name, .hc-name) .fn-nick { line-height: .95; vertical-align: baseline; }

/* the name eases to its new size while the nickname unfolds (the block keeps its height, so nothing jumps) */
:is(.fighter-name, .hc-name) { position: relative; }

/* stacking during page switches: black → tear/blood → LOGO → knife → flash */
.cut .cut-tear { z-index: 1; } .cut .cut-logo { z-index: 2; } .cut .cut-blade { z-index: 3; } .cut .cut-flash { z-index: 4; }

/* ---------- swapped name = an even 3-line stack:  FIRST / "Nickname" / LAST  (same at every width and zoom) ---------- */
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name)[data-layout="stack"] { line-height: .86; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name)[data-layout="line"] { white-space: nowrap; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name)[data-layout="stack"] :is(.fn-a, .fn-b) { display: block; white-space: nowrap; }

.measure, .measure * { transition: none !important; animation: none !important; }

/* ---------- centred names (both states) ----------
   Home roster cards: everything centred.  Fighter profiles: the identity header (subject, name, nickname, handle, weight, disciplines)
   is centred; the bio / style paragraphs stay left-aligned for reading. */
.home-card { text-align: center; align-items: center; }
.hc-name { align-self: stretch; text-align: center; }          /* stays full-width so the name can measure/fit correctly */
.hc-nick { align-self: center; text-align: center; }
.fighter-number, .fighter-name, .fighter-nickname, .fighter-division-weight, .fighter-division-sports { text-align: center; }
.fighter-nickname { margin-left: auto; margin-right: auto; }
.fighter-username-line { justify-content: center; }


/* stacked layout (long names): nickname gets its own, slightly smaller line */
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name)[data-layout="stack"] .fn-nick { display: block; font-size: .9em; margin: .05em 0; }

/* ---------- name RECONFIGURE: the whole name glitches while its words glide to their new places; the nickname glitches into the gap ----------
   The words are inline-blocks so they can be transformed. JS measures each word's position in both states (--adx/--ady/--bdx/--bdy = old − new),
   so the glide starts exactly where the word was. Leaving glides back the other way. Layout never animates (transforms only). */
:is(.fighter-name, .hc-name) :is(.fn-a, .fn-b) { display: inline-block; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-a { animation: fnMoveA .75s cubic-bezier(.2, .8, .2, 1) both, fnWordGlitch .75s steps(1, end) backwards; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-b { animation: fnMoveB .75s cubic-bezier(.2, .8, .2, 1) both, fnWordGlitch .75s steps(1, end) .05s backwards; }
:is(.fighter-block, .home-card).unswap:not(.glitching) :is(.fighter-name, .hc-name) .fn-a { animation: fnMoveAr .5s cubic-bezier(.2, .8, .2, 1) both; }
:is(.fighter-block, .home-card).unswap:not(.glitching) :is(.fighter-name, .hc-name) .fn-b { animation: fnMoveBr .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fnMoveA { from { transform: translate(var(--adx, 0px), var(--ady, 0px)); filter: blur(2.5px); } 55% { filter: blur(.8px); } to { transform: none; filter: blur(0); } }
@keyframes fnMoveB { from { transform: translate(var(--bdx, 0px), var(--bdy, 0px)); filter: blur(2.5px); } 55% { filter: blur(.8px); } to { transform: none; filter: blur(0); } }
@keyframes fnMoveAr { from { transform: translate(calc(var(--adx, 0px) * -1), calc(var(--ady, 0px) * -1)); filter: blur(2px); } to { transform: none; filter: blur(0); } }
@keyframes fnMoveBr { from { transform: translate(calc(var(--bdx, 0px) * -1), calc(var(--bdy, 0px) * -1)); filter: blur(2px); } to { transform: none; filter: blur(0); } }
@keyframes fnWordGlitch {
  0% { opacity: 1; text-shadow: 6px 0 rgba(255, 255, 255, .95), -6px 0 rgba(255, 42, 42, .95); }
  12% { opacity: .35; text-shadow: -5px 0 rgba(255, 255, 255, .9), 5px 0 rgba(255, 42, 42, .9); }
  22% { opacity: 1; text-shadow: 5px 0 rgba(255, 255, 255, .9), -5px 0 rgba(255, 42, 42, .9); }
  36% { opacity: .55; text-shadow: -3px 0 rgba(255, 255, 255, .85), 3px 0 rgba(255, 42, 42, .85); }
  50% { opacity: 1; text-shadow: 3px 0 rgba(255, 255, 255, .8), -3px 0 rgba(255, 42, 42, .8); }
  66% { opacity: 1; text-shadow: -2px 0 rgba(255, 255, 255, .7), 2px 0 rgba(255, 42, 42, .7); }
  82% { opacity: 1; text-shadow: 1px 0 rgba(255, 255, 255, .5), -1px 0 rgba(255, 42, 42, .5); } }

/* page switches: no grey layers — the white flash and the grey static-noise overlay are removed (they washed the dark page grey, then dropped away) */
.cut::after, .cut-flash { display: none !important; }

/* ---------- hover/tap glitch = IN PLACE ONLY (final pass) ----------
   No gliding words, no offset "afterimage" copies, no sideways text-shadow splits. The text stays exactly where it is and just
   flickers (blinks + brief horizontal slices dropping out) with a glow pulse. These rules come last so they win over the older ones. */
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) :is(.fn-a, .fn-b) { animation: none; }
:is(.fighter-block, .home-card).unswap:not(.glitching) :is(.fighter-name, .hc-name) :is(.fn-a, .fn-b) { animation: none; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-nick::before,
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-nick::after { display: none; }

/* leaving: a short in-place flicker instead of the words gliding back */
:is(.fighter-block, .home-card).unswap:not(.glitching) :is(.fighter-name, .hc-name) { animation: nameSwap .4s steps(1, end) 1; }

@keyframes nameSwap {
  0% { opacity: 0; }
  10% { opacity: 1; clip-path: inset(0 0 55% 0); text-shadow: 0 0 16px rgba(255, 60, 50, .95); }
  20% { opacity: .3; clip-path: inset(0); }
  32% { opacity: 1; clip-path: inset(48% 0 0 0); text-shadow: 0 0 14px rgba(255, 60, 50, .9); }
  46% { opacity: .6; clip-path: inset(0); }
  60% { opacity: 1; clip-path: inset(25% 0 30% 0); text-shadow: 0 0 10px rgba(255, 50, 40, .7); }
  76%, 100% { opacity: 1; clip-path: inset(-24px); text-shadow: 0 0 6px rgba(255, 42, 42, .35); } }
@keyframes fnGlitchIn {
  0% { opacity: 0; }
  8% { opacity: 1; clip-path: inset(-24px -24px 55% -24px); }
  16% { opacity: .15; clip-path: inset(-24px); }
  28% { opacity: 1; clip-path: inset(48% -24px -24px -24px); }
  40% { opacity: .4; clip-path: inset(-24px); }
  54% { opacity: 1; clip-path: inset(25% -24px 30% -24px); }
  70%, 100% { opacity: 1; clip-path: inset(-24px); } }
/* the name's ongoing glitch while active: only a glow pulse + a faint blink, nothing moves or doubles */
@keyframes txGlitch {
  0%, 100% { opacity: 1; text-shadow: 0 0 6px rgba(255, 42, 42, .35); }
  14% { opacity: .78; text-shadow: 0 0 14px rgba(255, 60, 50, .9); }
  17% { opacity: 1; text-shadow: 0 0 6px rgba(255, 42, 42, .35); }
  52% { opacity: .82; text-shadow: 0 0 12px rgba(255, 60, 50, .85); }
  55% { opacity: 1; text-shadow: 0 0 6px rgba(255, 42, 42, .35); }
  83% { opacity: .88; text-shadow: 0 0 10px rgba(255, 50, 40, .7); }
  86% { opacity: 1; text-shadow: 0 0 6px rgba(255, 42, 42, .35); } }

/* the name + nickname group keeps the same height in both states (see prep() in js/site.js): no slide, no jump — the name just glitches into its new form */
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) { min-height: var(--gmin, 0px); }
:is(.fighter-block, .home-card).glitching :is(.fighter-nickname, .hc-nick) { padding-bottom: 0 !important; }

/* ---------- STRONGER glitch, still in place (nothing moves, nothing doubles) ----------
   hot colour flashes (white ↔ red) · brightness/contrast spikes · horizontal slice cut-outs · interlaced scanline drop-out across the letters */
@keyframes nameSwap {
  0% { opacity: 0; }
  5% { opacity: 1; color: #ff3a2a; clip-path: inset(0 0 62% 0); filter: brightness(2.4) contrast(1.4); text-shadow: 0 0 26px rgba(255, 70, 55, 1), 0 0 60px rgba(255, 30, 20, .85); }
  10% { opacity: .15; clip-path: inset(0); filter: none; }
  15% { opacity: 1; color: #fff; clip-path: inset(58% 0 0 0); filter: brightness(2.2); text-shadow: 0 0 26px rgba(255, 70, 55, 1), 0 0 60px rgba(255, 30, 20, .85); }
  22% { opacity: 1; color: #ff3a2a; clip-path: inset(0); -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 7px); mask-image: repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 7px); filter: brightness(1.8); text-shadow: 0 0 26px rgba(255, 70, 55, 1), 0 0 60px rgba(255, 30, 20, .85); }
  29% { opacity: .3; -webkit-mask-image: none; mask-image: none; color: #fff; filter: none; }
  36% { opacity: 1; clip-path: inset(18% 0 48% 0); filter: brightness(2.4) contrast(1.6); text-shadow: 0 0 26px rgba(255, 70, 55, 1), 0 0 60px rgba(255, 30, 20, .85); }
  44% { opacity: .55; clip-path: inset(0); filter: none; }
  52% { opacity: 1; color: #ff3a2a; -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 5px); mask-image: repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 5px); filter: brightness(1.7); text-shadow: 0 0 26px rgba(255, 70, 55, 1), 0 0 60px rgba(255, 30, 20, .85); }
  60% { opacity: 1; -webkit-mask-image: none; mask-image: none; color: #fff; clip-path: inset(36% 0 22% 0); filter: brightness(2); }
  70% { opacity: .75; clip-path: inset(0); color: #ff3a2a; filter: none; }
  80% { opacity: 1; color: #fff; filter: brightness(1.5); text-shadow: 0 0 26px rgba(255, 70, 55, 1), 0 0 60px rgba(255, 30, 20, .85); }
  90%, 100% { opacity: 1; color: var(--white); clip-path: inset(-24px); -webkit-mask-image: none; mask-image: none; filter: none; text-shadow: 0 0 6px rgba(255, 42, 42, .35); } }

@keyframes fnGlitchIn {
  0% { opacity: 0; }
  5% { opacity: 1; color: #fff; clip-path: inset(-24px -24px 62% -24px); filter: brightness(2.6) contrast(1.4); }
  10% { opacity: .1; clip-path: inset(-24px); filter: none; }
  16% { opacity: 1; color: #ff3a2a; clip-path: inset(55% -24px -24px -24px); filter: brightness(2.2); }
  23% { opacity: 1; clip-path: inset(-24px); -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 7px); mask-image: repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 7px); color: #fff; filter: brightness(2); }
  31% { opacity: .25; -webkit-mask-image: none; mask-image: none; color: #ff3a2a; filter: none; }
  39% { opacity: 1; clip-path: inset(20% -24px 46% -24px); color: #fff; filter: brightness(2.4) contrast(1.6); }
  48% { opacity: .5; clip-path: inset(-24px); filter: none; }
  57% { opacity: 1; -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 5px); mask-image: repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 5px); color: #ff3a2a; filter: brightness(1.8); }
  66% { opacity: 1; -webkit-mask-image: none; mask-image: none; clip-path: inset(34% -24px 24px -24px); color: #fff; filter: brightness(2); }
  76% { opacity: .8; clip-path: inset(-24px); color: #ff3a2a; filter: none; }
  86%, 100% { opacity: 1; color: #ff4a3a; clip-path: inset(-24px); -webkit-mask-image: none; mask-image: none; filter: none; } }

/* ongoing bursts while the name is active: short, hard hits every ~2s */
@keyframes txGlitch {
  0%, 100% { opacity: 1; color: var(--white); filter: none; -webkit-mask-image: none; mask-image: none; clip-path: inset(-24px); text-shadow: 0 0 6px rgba(255, 42, 42, .35); }
  13% { opacity: .55; color: #ff3a2a; filter: brightness(2.2) contrast(1.4); text-shadow: 0 0 26px rgba(255, 70, 55, 1), 0 0 60px rgba(255, 30, 20, .85); }
  15% { opacity: 1; color: #fff; clip-path: inset(0 0 58% 0); text-shadow: 0 0 26px rgba(255, 70, 55, 1), 0 0 60px rgba(255, 30, 20, .85); }
  17% { opacity: 1; clip-path: inset(48% 0 0 0); filter: brightness(2); }
  19% { opacity: 1; clip-path: inset(-24px); color: var(--white); filter: none; text-shadow: 0 0 6px rgba(255, 42, 42, .35); }
  51% { opacity: .7; -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 7px); mask-image: repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 7px); color: #ff3a2a; filter: brightness(1.8); text-shadow: 0 0 26px rgba(255, 70, 55, 1), 0 0 60px rgba(255, 30, 20, .85); }
  54% { opacity: 1; -webkit-mask-image: none; mask-image: none; color: var(--white); filter: none; text-shadow: 0 0 6px rgba(255, 42, 42, .35); }
  82% { opacity: .6; clip-path: inset(30% 0 30% 0); filter: brightness(2.3) contrast(1.5); text-shadow: 0 0 26px rgba(255, 70, 55, 1), 0 0 60px rgba(255, 30, 20, .85); }
  85% { opacity: 1; clip-path: inset(-24px); filter: none; text-shadow: 0 0 6px rgba(255, 42, 42, .35); } }

/* nickname: harder periodic hits + a bigger glow pulse */
@keyframes fnJit {
  0%, 100% { opacity: 1; filter: none; -webkit-mask-image: none; mask-image: none; }
  8% { opacity: .35; filter: brightness(2.4) contrast(1.5); }
  10% { opacity: 1; -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 7px); mask-image: repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 7px); filter: brightness(1.8); }
  13% { opacity: 1; -webkit-mask-image: none; mask-image: none; filter: none; }
  36% { opacity: .5; clip-path: inset(-24px -24px 55% -24px); filter: brightness(2.2); }
  39% { opacity: 1; clip-path: inset(50% -24px -24px -24px); filter: brightness(1.9); }
  42% { opacity: 1; clip-path: inset(-24px); filter: none; }
  64% { opacity: .45; -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 5px); mask-image: repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 5px); filter: brightness(2); }
  67% { opacity: 1; -webkit-mask-image: none; mask-image: none; filter: none; }
  86% { opacity: .6; clip-path: inset(30% -24px 30% -24px); filter: brightness(2.4) contrast(1.5); }
  89% { opacity: 1; clip-path: inset(-24px); filter: none; } }
@keyframes fnGlow {
  0%, 100% { text-shadow: 0 0 12px rgba(255, 50, 40, .9), 0 0 30px rgba(190, 0, 0, .65); }
  50% { text-shadow: 0 0 28px rgba(255, 90, 70, 1), 0 0 62px rgba(255, 30, 20, .9), 0 0 110px rgba(190, 0, 0, .6); } }

/* ---------- home cards: weight class above the disciplines + stat strip ---------- */
.hc-class { font-family: var(--hyde); font-size: clamp(.95rem, 2.2vw, 1.15rem); letter-spacing: .22em; text-transform: uppercase; color: var(--white); margin-top: .7rem; text-shadow: 0 0 10px rgba(255, 42, 42, .45); }
.hc-meta { margin-top: .2rem; opacity: .85; }
.hc-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-top: 1.1rem; border: 1px solid rgba(167, 0, 0, .3); background: rgba(167, 0, 0, .18); gap: 1px; }
.hc-stats > span { display: flex; flex-direction: column; gap: .3rem; align-items: center; padding: .75rem .4rem; background: var(--black); }
.hc-stats b { font-family: var(--jekyll); font-weight: normal; font-size: clamp(.9rem, 2.4vw, 1.15rem); color: var(--white); line-height: 1; }
.hc-stats i { font-family: var(--hyde); font-style: normal; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(240, 236, 228, .6); }

/* ---------- home cards: one-liner → glitches into the Instagram handle on hover/tap (same slot, nothing moves) ---------- */
.hc-line { position: relative; display: block; width: 100%; margin-top: .8rem; text-align: center; }
.hc-line em { font-style: normal; display: block; }
.hl-a { font-family: var(--jekyll); font-size: clamp(.95rem, 2.3vw, 1.1rem); line-height: 1.35; color: rgba(240, 236, 228, .82); }
.hl-b { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex !important; align-items: center; justify-content: center; opacity: 0; pointer-events: none;
  font-family: var(--hyde); font-size: clamp(.9rem, 2.2vw, 1.05rem); letter-spacing: .18em; color: #fff; text-shadow: 0 0 12px rgba(255, 50, 40, .85), 0 0 28px rgba(190, 0, 0, .6); }
:is(.fighter-block, .home-card).glitching .hl-a { opacity: 0; animation: lineOut .45s steps(1, end) both; }
:is(.fighter-block, .home-card).glitching .hl-b { opacity: 1; pointer-events: none; animation: igIn .55s steps(1, end) .42s both; }
.hc-ig-hit, .hc-ig-hit * { cursor: url('../assets/cursor/finger-red.png') 8 0, pointer; }
@keyframes igIn {
  0% { opacity: 0; }
  8% { opacity: 1; color: #ff3a2a; clip-path: inset(0 0 60% 0); filter: brightness(2.2); }
  16% { opacity: .15; clip-path: inset(0); filter: none; }
  26% { opacity: 1; color: #fff; clip-path: inset(55% 0 0 0); filter: brightness(2); }
  36% { opacity: .35; clip-path: inset(0); filter: none; }
  48% { opacity: 1; color: #ff3a2a; -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 6px); mask-image: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 6px); filter: brightness(1.8); }
  60% { opacity: 1; color: #fff; -webkit-mask-image: none; mask-image: none; clip-path: inset(30% 0 25% 0); filter: brightness(2); }
  74% { opacity: .8; clip-path: inset(0); color: #ff3a2a; filter: none; }
  88%, 100% { opacity: 1; color: #fff; clip-path: inset(-12px); -webkit-mask-image: none; mask-image: none; filter: none; } }

/* ---------- card Instagram handle = exactly the fighter-profile handle: same font, size, white, blue verified tick ---------- */
.verified-tick { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #1d9bf0; border-radius: 50%; flex-shrink: 0; }
.verified-tick::after { content: ''; width: 8px; height: 5px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg) translateY(-1px); display: block; }
.hl-b { gap: .5rem; font-family: var(--carnage); font-size: clamp(16px, 2vw, 24px); letter-spacing: .05em; color: var(--white); text-shadow: none; }
.hl-b .hc-ig-name { color: inherit; }

/* the one-liner glitches itself out first (in place), THEN the Instagram handle glitches in (see igIn, delayed .42s) */
@keyframes lineOut {
  0% { opacity: 1; }
  10% { opacity: .35; color: #ff3a2a; filter: brightness(2.2); }
  20% { opacity: 1; color: #fff; clip-path: inset(0 0 55% 0); filter: brightness(2); }
  32% { opacity: .25; clip-path: inset(0); filter: none; }
  44% { opacity: 1; color: #ff3a2a; -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 6px); mask-image: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 6px); filter: brightness(1.8); }
  58% { opacity: .6; color: #fff; -webkit-mask-image: none; mask-image: none; clip-path: inset(35% 0 20% 0); }
  72% { opacity: 1; clip-path: inset(0); filter: none; }
  86% { opacity: .3; clip-path: inset(50% 0 0 0); color: #ff3a2a; }
  100% { opacity: 0; clip-path: inset(0); color: #fff; } }

/* ---------- glow: one-liners + every Instagram handle (cards AND fighter profiles) ---------- */
.hl-a { text-shadow: 0 0 8px rgba(255, 42, 42, .5), 0 0 22px rgba(255, 42, 42, .28); animation: lineGlow 2.8s ease-in-out infinite; }
@keyframes lineGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(255, 42, 42, .45), 0 0 20px rgba(255, 42, 42, .22); }
  50% { text-shadow: 0 0 14px rgba(255, 70, 55, .85), 0 0 34px rgba(255, 42, 42, .5), 0 0 60px rgba(190, 0, 0, .3); } }
.hl-b, .fighter-username { text-shadow: none; transition: color .15s ease, text-shadow .2s ease; }
/* igIn only plays IN (backwards fill) so the hover colour below isn't held down by the animation afterwards */
:is(.fighter-block, .home-card).glitching .hl-b { animation: igIn .55s steps(1, end) .42s backwards; }
@keyframes igGlow {
  0%, 100% { text-shadow: 0 0 9px rgba(255, 255, 255, .3), 0 0 20px rgba(255, 42, 42, .6), 0 0 38px rgba(255, 42, 42, .32); }
  50% { text-shadow: 0 0 14px rgba(255, 255, 255, .55), 0 0 30px rgba(255, 70, 55, .95), 0 0 60px rgba(255, 42, 42, .55); } }
/* glow ONLY while the cursor is on the handle itself (cards + profiles): the text turns red and glows red, the tick glows blue */
.hc-ig-hit:hover, .fighter-username:hover { color: #ff3a2a; text-shadow: 0 0 10px rgba(255, 70, 55, .95), 0 0 24px rgba(255, 42, 42, .8), 0 0 48px rgba(255, 30, 20, .55); }
.fighter-username:hover + .verified-tick, .hc-ig-hit:hover .verified-tick { box-shadow: 0 0 10px rgba(29, 155, 240, .8), 0 0 22px rgba(29, 155, 240, .4); }
.verified-tick { transition: box-shadow .2s ease; }

/* ---------- accurate Instagram hitbox on the home cards: ONLY the handle + tick (plus a little padding for thumbs) is clickable/hoverable ---------- */
.hl-b { pointer-events: none !important; }
.hc-ig-hit { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .6rem; margin: -.3rem -.6rem; pointer-events: none; transition: color .15s ease, text-shadow .2s ease; }
:is(.fighter-block, .home-card).glitching .hc-ig-hit { pointer-events: auto; }

/* the name's strong glitch-in burst must ALSO play on the home cards (a later rule had been replacing it with only the slow ongoing glitch) */
.home-card.glitching.swap .hc-name { animation: nameSwap .6s steps(1, end) 1, txGlitch 2.2s steps(1, end) .6s infinite; }

/* ---------- marquee glitch roles SWAPPED (final) ----------
   "You want em gone?"      (outlined, white)  → calm: soft pulsing glow + a short glitch burst every ~2.4s
   "You call Slasher Inc."  (solid red, .hot)  → constant electrocution (BZZZT), built only from reds */
.marquee-track span:not(.hot) { animation: weGlow 2.6s ease-in-out infinite, hotJit 2.4s steps(1, end) infinite; }
.marquee-track span:not(.hot)::before { animation: hotA 2.4s steps(1, end) infinite; }
.marquee-track span:not(.hot)::after { animation: hotB 2.4s .04s steps(1, end) infinite; }
.marquee-track span:not(.hot):nth-child(2n), .marquee-track span:not(.hot):nth-child(2n)::before, .marquee-track span:not(.hot):nth-child(2n)::after { animation-delay: -1.2s; }
@keyframes weGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(255, 255, 255, .3), 0 0 22px rgba(255, 42, 42, .45); }
  50% { text-shadow: 0 0 14px rgba(255, 255, 255, .5), 0 0 34px rgba(255, 60, 50, .85), 0 0 60px rgba(190, 0, 0, .45); } }

.marquee-track span.hot { animation: zapBase 1.3s steps(1, end) infinite; text-shadow: 0 0 14px rgba(255, 50, 40, .85), 0 0 32px rgba(190, 0, 0, .6); }
.marquee-track span.hot::before { color: transparent; -webkit-text-stroke: 1.5px #ff4a3a; mix-blend-mode: normal; animation: zapA 1.05s steps(1, end) infinite; }
.marquee-track span.hot::after { color: transparent; -webkit-text-stroke: 1.5px #ff9080; mix-blend-mode: normal; animation: zapB 1.6s steps(1, end) infinite; }
.marquee-track span.hot:nth-child(2n), .marquee-track span.hot:nth-child(2n)::before, .marquee-track span.hot:nth-child(2n)::after { animation-delay: -.6s; }

/* ---------- marquee (final): ONLY "You call Slasher Inc." glitches. "You want em gone?" is solid brand red + calm (gentle glow pulse, no glitch) ---------- */
.marquee-track span:not(.hot) { color: var(--red); -webkit-text-stroke: 0; animation: hotGlow 2.6s ease-in-out infinite; text-shadow: 0 0 22px rgba(167, 0, 0, .75), 0 0 50px rgba(167, 0, 0, .35); }
.marquee-track span:not(.hot)::before, .marquee-track span:not(.hot)::after { display: none; }

/* ---------- marquee (final²): only the words "Slasher Inc." are electrified; "You call" stays red + calm like the rest ---------- */
.marquee-track .mq-zap { position: relative; display: inline-block; font-style: normal; animation: zapBase 1.3s steps(1, end) infinite; text-shadow: 0 0 14px rgba(255, 50, 40, .85), 0 0 32px rgba(190, 0, 0, .6); }
.marquee-track .mq-zap::before, .marquee-track .mq-zap::after { content: attr(data-text); position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; color: transparent; opacity: 0; }
.marquee-track .mq-zap::before { -webkit-text-stroke: 1.5px #ff4a3a; animation: zapA 1.05s steps(1, end) infinite; }
.marquee-track .mq-zap::after { -webkit-text-stroke: 1.5px #ff9080; animation: zapB 1.6s steps(1, end) infinite; }

/* ---------- "Slasher Inc." stays RED while glitching: same jitter as the old zap, brightness capped, layers are true reds ---------- */
@keyframes zapRed {
  0.0% { transform: translate(-4.0px, 2.1px) skewX(-3.8deg) scaleY(0.96); opacity: 1; filter: brightness(1); }
  7.1% { transform: translate(-1.4px, 1.3px) skewX(4.6deg) scaleY(1.01); opacity: 1; filter: brightness(1); }
  14.3% { transform: translate(2.5px, -1.3px) skewX(-2.3deg) scaleY(1.03); opacity: 1; filter: brightness(1.25) saturate(1.6); }
  21.4% { transform: translate(-0.3px, 2.1px) skewX(5.5deg) scaleY(0.95); opacity: 1; filter: brightness(1); }
  28.6% { transform: translate(1.5px, 0.7px) skewX(1.4deg) scaleY(1.06); opacity: 1; filter: brightness(1); }
  35.7% { transform: translate(-1.3px, 1.7px) skewX(-3.0deg) scaleY(0.95); opacity: 0.63; filter: brightness(1.25) saturate(1.6); }
  42.9% { transform: translate(0.5px, 1.1px) skewX(6.8deg) scaleY(0.94); opacity: 0.67; filter: brightness(1); }
  50.0% { transform: translate(-0.6px, -1.5px) skewX(7.4deg) scaleY(0.94); opacity: 1; filter: brightness(1.25) saturate(1.6); }
  57.1% { transform: translate(3.4px, 0.1px) skewX(-6.0deg) scaleY(0.99); opacity: 0.61; filter: brightness(1); }
  64.3% { transform: translate(-1.3px, 0.2px) skewX(2.1deg) scaleY(0.96); opacity: 1; filter: brightness(1); }
  71.4% { transform: translate(2.9px, 0.7px) skewX(2.4deg) scaleY(1.00); opacity: 1; filter: brightness(1); }
  78.6% { transform: translate(3.5px, -0.5px) skewX(3.7deg) scaleY(0.97); opacity: 1; filter: brightness(1); }
  85.7% { transform: translate(-1.4px, -0.5px) skewX(5.3deg) scaleY(1.05); opacity: 0.75; filter: brightness(1.25) saturate(1.6); }
  92.9% { transform: translate(-2.8px, -2.1px) skewX(8.9deg) scaleY(0.96); opacity: 1; filter: brightness(1.25) saturate(1.6); }
  100% { transform: translate(0.7px, -1.8px) skewX(7.6deg) scaleY(1.05); opacity: 1; filter: brightness(1); } }

.marquee-track .mq-zap { animation: zapRed 1.3s steps(1, end) infinite; }
.marquee-track .mq-zap::before { -webkit-text-stroke: 1.5px #ff2a2a; }
.marquee-track .mq-zap::after { -webkit-text-stroke: 1.5px #c40f0f; }

/* home: Kit's one-line name fills the space the taller card reserves */
.home-card:first-child:not(.glitching) .hc-name { font-size: clamp(38px, 5.4vw, 74px); }

.hc-name.bsz { font-size: clamp(30px, 4vw, 52px) !important; }
.home-card:first-child .hc-nick { font-size: clamp(32px, 4.6vw, 56px); }

/* ================= PHONE PERFORMANCE =================
   Keep every glitch; only drop the things that cost a lot and are barely visible on a phone. */
@media (hover: none), (max-width: 768px) {
  /* body text: the thin outline is expensive to rasterise; the white fill + red glow is enough */
  nav ul a, .fighter-bio, .fighter-style, .manifesto-body p, .anti-item, .drop-text p, .hc-meta, .fighter-division-weight, .fighter-division-sports, .stat-label, .merch-detail,
  .contact-link-label, .footer-copy, .btn-ghost, .merch-note span { -webkit-text-stroke: 0 !important; text-shadow: 0 0 5px rgba(255, 42, 42, .3) !important; }
  /* only the big text-shadow pulse is static; all other animations stay */
    .tv-track { animation: none; opacity: 0; }
}
/* phones: lighter intro + page switch (same look, no full-screen drop-shadow filters, no animated snow jump) */
html.lite .cut-blade { filter: none; }
html.lite .cut-logo { filter: none; }
html.lite .vhs-snow { inset: 0; animation: vhsSnowFade 1.6s ease-out both; }

/* ================= SMOOTHNESS (whole site) ================= */
/* animations only run for what is on screen */
.off, .off *, .off *::before, .off *::after { animation-play-state: paused !important; }
/* marquee: its own GPU layer; on phones the glow pulse (a big text-shadow repaint of a 3000px-wide layer every frame) is steady instead */
.marquee-track { will-change: transform; backface-visibility: hidden; }
html.lite .marquee-track span:not(.mq-zap) { animation: none !important; text-shadow: 0 0 18px rgba(167, 0, 0, .75), 0 0 40px rgba(167, 0, 0, .3) !important; }
/* transition overlay layers are promoted only while a transition is running */
html.leaving .cut-blade, html.leaving .cut-logo, html.arriving .cut-logo, html.intro .cut-bg { will-change: opacity, transform; }

/* ================= CHEAPER GLOWS (phones + desktop) =================
   The pulsing text-shadows were repainted every single frame, with blurs up to 160px (the biggest cost on phones).
   Same pulse now: smaller blur radii and it steps ~6-8x a second instead of re-rasterising 60x a second. Glitch bursts are unchanged. */
@keyframes glowPulseL { 0%, 100% { text-shadow: 0 0 36px rgba(167,0,0,.5), 0 0 70px rgba(167,0,0,.2), 2px 2px 0 #000; } 50% { text-shadow: 0 0 48px rgba(240,40,40,.75), 0 0 90px rgba(167,0,0,.4), 2px 2px 0 #000; } }
@keyframes nickGlowL { 0%, 100% { text-shadow: 0 0 10px rgba(167,0,0,.75), 0 0 24px rgba(167,0,0,.4); } 50% { text-shadow: 0 0 16px rgba(255,50,40,1), 0 0 36px rgba(220,0,0,.7), 0 0 52px rgba(167,0,0,.4); } }
@keyframes fnGlowL { 0%, 100% { text-shadow: 0 0 10px rgba(255,50,40,.9), 0 0 24px rgba(190,0,0,.6); } 50% { text-shadow: 0 0 18px rgba(255,90,70,1), 0 0 38px rgba(255,30,20,.85), 0 0 56px rgba(190,0,0,.5); } }
@keyframes lineGlowL { 0%, 100% { text-shadow: 0 0 8px rgba(255,42,42,.45), 0 0 18px rgba(255,42,42,.22); } 50% { text-shadow: 0 0 12px rgba(255,70,55,.8), 0 0 26px rgba(255,42,42,.45); } }
@keyframes btnPulseL { 0%, 100% { box-shadow: 0 0 0 rgba(167,0,0,0); } 50% { box-shadow: 0 0 18px rgba(167,0,0,.7); } }
.hero-title { animation: fadeUp .7s .4s ease forwards, glowPulseL 4s 1.4s steps(12, end) infinite; }
.contact-heading { animation: glowPulseL 4s steps(12, end) infinite; }
.fighter-nickname, .hc-nick { animation-name: nickGlowL, nickJit !important; animation-timing-function: steps(8, end), steps(1, end) !important; }
.hl-a { animation: lineGlowL 2.8s steps(8, end) infinite; }
.btn-primary { animation: btnPulseL 2.6s 2s steps(8, end) infinite; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-nick { animation-name: fnGlitchIn, fnJit, fnGlowL !important; animation-timing-function: steps(1, end), steps(1, end), steps(8, end) !important; }
/* blend modes on the (mostly invisible) glitch layers force extra offscreen surfaces on phones */
html.lite *::before, html.lite *::after { mix-blend-mode: normal !important; }
/* ================= TEXT GLOW + GLITCH ON THE GPU =================
   The glow pulse is a blurred copy of the text whose OPACITY pulses (no text repaint at all); glitch layers get their own layers
   so a glitch step repaints only that tiny layer, never the page/marquee underneath. */
.glowcopy { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; user-select: none; opacity: 0; will-change: opacity; animation: glowFade 4s ease-in-out infinite; }
.glowcopy, .glowcopy * { color: transparent !important; -webkit-text-stroke: 0 !important; background: none !important; }
.hero-title .glowcopy { text-shadow: 0 0 48px rgba(240, 40, 40, .75), 0 0 90px rgba(167, 0, 0, .4); }
.hc-nick .glowcopy, .fighter-nickname .glowcopy { text-shadow: 0 0 16px rgba(255, 50, 40, 1), 0 0 36px rgba(220, 0, 0, .7), 0 0 52px rgba(167, 0, 0, .4); animation-duration: 2.6s; }
@keyframes glowFade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.hero-title { text-shadow: 0 0 36px rgba(167, 0, 0, .5), 0 0 70px rgba(167, 0, 0, .2), 2px 2px 0 #000; animation: fadeUp .7s .4s ease forwards; }
.fighter-nickname, .hc-nick { animation-name: nickJit !important; animation-timing-function: steps(1, end) !important; text-shadow: 0 0 10px rgba(167, 0, 0, .75), 0 0 24px rgba(167, 0, 0, .4); }
.hero-title::before, .hero-title::after { text-shadow: none; will-change: transform, opacity; }
.hc-nick::before, .hc-nick::after, .fighter-nickname::before, .fighter-nickname::after { will-change: transform, opacity; }
.marquee-track .mq-zap, .marquee-track .mq-zap::before, .marquee-track .mq-zap::after { will-change: transform, opacity; }
html.lite .hero-bg-logo img { filter: none; }
/* ---------- logo shadow during page swaps: the logo keeps its red glow + dark shadow on desktop AND phones (static filter on a cached layer; only opacity/transform animate) ---------- */
html.lite .cut-logo { filter: drop-shadow(0 0 16px rgba(255, 30, 30, .95)) drop-shadow(0 0 42px rgba(210, 0, 0, .85)) drop-shadow(0 8px 14px rgba(0, 0, 0, .9)) brightness(1.12); }
html:not(.lite) .cut-logo { filter: drop-shadow(0 0 30px rgba(255, 30, 30, .95)) drop-shadow(0 0 90px rgba(210, 0, 0, .9)) drop-shadow(0 10px 18px rgba(0, 0, 0, .85)) brightness(1.15); }

/* ================= PHONES / TOUCH SCREENS (html.perf1 is added automatically; one site, no settings) =================
   the always-on text glitch/glow loops and embers stop (glows stay as static glow; tap/hover bursts and page swaps still glitch) */
html.perf1 .embers { display: none; }
html.perf1 .glowcopy { animation: none; opacity: .55; }
html.perf1 .hero-title::before, html.perf1 .hero-title::after,
html.perf1 .hc-nick::before, html.perf1 .hc-nick::after, html.perf1 .fighter-nickname::before, html.perf1 .fighter-nickname::after,
html.perf1 .marquee-track span::before, html.perf1 .marquee-track span::after { display: none !important; }
html.perf1 .hero-title, html.perf1 .hc-nick, html.perf1 .fighter-nickname, html.perf1 .hl-a, html.perf1 .btn-primary,
html.perf1 .marquee-track span, html.perf1 .marquee-track .mq-zap, html.perf1 .hero-bg-logo img, html.perf1 .nav-logo img { animation-iteration-count: 1 !important; }
html.perf1 .hero-title { animation: fadeUp .7s .4s ease forwards !important; }
html.perf1 .hc-nick, html.perf1 .fighter-nickname, html.perf1 .hl-a, html.perf1 .btn-primary, html.perf1 .marquee-track span, html.perf1 .marquee-track .mq-zap, html.perf1 .nav-logo img, html.perf1 .hero-bg-logo img { animation: none !important; }
html.perf1 .marquee-track { animation: marquee 28s linear infinite !important; }
html.perf1 .tv-track { animation: none; opacity: 0; }


/* ================= PAGE SWAP = just the logo over black (no knife, no tear, no glitch, no glow) ================= */
.cut-blade, .cut-tear { display: none !important; }
/* scanlines + signal noise + the white flash stay */
.cut .cut-flash { display: block !important; }
.cut::after { display: block !important; }
.cut-bg::after { display: block; }
html.lite .cut::after { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px); animation: none; opacity: .5; }
html:not(.intro) .cut-logo { filter: none; }   /* no glow; the glitch filter is applied inline by JS while swapping */
html.leaving .cut-bg { animation: swapIn .22s ease-out both; }
html.leaving .cut-logo { animation: swapIn .22s ease-out both; }
html.arriving .cut-bg { opacity: 1; animation: swapOut .3s .05s ease-out both; }
html.arriving .cut-logo { animation: swapOut .3s .05s ease-out both; }
@keyframes swapIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes swapOut { from { opacity: 1; } to { opacity: 0; } }
/* ================= LIGHT GLITCH FOR PHONES =================
   Phones: no filters on the page, no per-frame JS. The page-swap glitch lives entirely in the (viewport-sized) overlay and only
   animates transform / opacity (GPU-composited): logo jitter with a static RGB split, a scan band, scanlines, the white flash.
   Desktop keeps the full SVG-filter glitch. */
html.lite .cut-bg::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16vh; opacity: 0; pointer-events: none; will-change: transform;
  background: linear-gradient(180deg, transparent, rgba(255, 40, 40, .4) 40%, rgba(255, 255, 255, .22) 55%, transparent); }
html.lite.leaving .cut-bg::before { animation: bandRun .45s linear both; }
html.lite.arriving .cut-bg::before { animation: bandRun .4s .02s linear both; }
@keyframes bandRun { 0% { opacity: 1; transform: translateY(-20vh); } 100% { opacity: .5; transform: translateY(110vh); } }
html.lite:not(.intro) .cut-logo { filter: drop-shadow(-5px 0 0 rgba(255, 30, 30, .85)) drop-shadow(5px 0 0 rgba(255, 255, 255, .6)); will-change: transform, opacity; }
html.lite.leaving .cut-bg { animation: swapIn .14s ease-out both; }
html.lite.leaving .cut-logo { animation: logoGlitchIn .5s steps(1, end) both; }
html.lite.arriving .cut-bg { opacity: 1; animation: swapOut .3s .12s ease-out both; }
html.lite.arriving .cut-logo { animation: logoGlitchOut .42s steps(1, end) both; }
@keyframes logoGlitchIn {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-5deg); }
  10% { opacity: 1; transform: translate(calc(-50% - 12px), -50%) rotate(-5deg) skewX(9deg); }
  20% { opacity: .15; transform: translate(-50%, -50%) rotate(-5deg); }
  30% { opacity: 1; transform: translate(calc(-50% + 14px), calc(-50% + 3px)) rotate(-5deg) skewX(-7deg); }
  45% { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg); }
  58% { opacity: .35; transform: translate(calc(-50% - 7px), -50%) rotate(-5deg) skewX(4deg); }
  72% { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg) scaleX(1.04); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg); } }
@keyframes logoGlitchOut {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg); }
  14% { opacity: .2; transform: translate(calc(-50% + 10px), -50%) rotate(-5deg) skewX(-6deg); }
  28% { opacity: 1; transform: translate(calc(-50% - 12px), calc(-50% - 2px)) rotate(-5deg) skewX(8deg); }
  44% { opacity: .3; transform: translate(-50%, -50%) rotate(-5deg); }
  60% { opacity: 1; transform: translate(calc(-50% + 6px), -50%) rotate(-5deg); }
  78% { opacity: 0; }
  100% { opacity: 0; } }

@media (hover: none), (max-width: 768px) {
  /* name swap + ongoing hits on phones: opacity / colour / slice cut-outs only (no brightness filters, no scanline masks, no 60px glows) */
  @keyframes nameSwap {
    0% { opacity: 0; }
    6% { opacity: 1; color: #ff3a2a; clip-path: inset(0 0 62% 0); }
    12% { opacity: .15; clip-path: inset(0); }
    20% { opacity: 1; color: #fff; clip-path: inset(58% 0 0 0); }
    30% { opacity: .3; clip-path: inset(0); color: #ff3a2a; }
    42% { opacity: 1; clip-path: inset(18% 0 48% 0); color: #fff; }
    54% { opacity: .55; clip-path: inset(0); color: #ff3a2a; }
    66% { opacity: 1; clip-path: inset(36% 0 22% 0); color: #fff; }
    80% { opacity: .75; clip-path: inset(0); color: #ff3a2a; }
    90%, 100% { opacity: 1; color: var(--white); clip-path: inset(-24px); } }
  @keyframes fnGlitchIn {
    0% { opacity: 0; }
    6% { opacity: 1; color: #fff; clip-path: inset(-24px -24px 62% -24px); }
    12% { opacity: .1; clip-path: inset(-24px); }
    20% { opacity: 1; color: #ff3a2a; clip-path: inset(55% -24px -24px -24px); }
    34% { opacity: .25; clip-path: inset(-24px); color: #fff; }
    48% { opacity: 1; clip-path: inset(20% -24px 46% -24px); color: #ff3a2a; }
    62% { opacity: .5; clip-path: inset(-24px); color: #fff; }
    76% { opacity: 1; clip-path: inset(34% -24px 24px -24px); color: #ff3a2a; }
    90%, 100% { opacity: 1; color: #ff4a3a; clip-path: inset(-24px); } }
  @keyframes txGlitch {
    0%, 100% { opacity: 1; color: var(--white); clip-path: inset(-24px); }
    13% { opacity: .55; color: #ff3a2a; }
    16% { opacity: 1; color: #fff; clip-path: inset(0 0 58% 0); }
    19% { opacity: 1; clip-path: inset(-24px); }
    51% { opacity: .7; color: #ff3a2a; }
    54% { opacity: 1; color: var(--white); }
    82% { opacity: .6; clip-path: inset(30% 0 30% 0); }
    85% { opacity: 1; clip-path: inset(-24px); } }
  @keyframes fnJit {
    0%, 100% { opacity: 1; clip-path: inset(-24px); }
    8% { opacity: .4; }
    11% { opacity: 1; }
    36% { opacity: .5; clip-path: inset(-24px -24px 55% -24px); }
    40% { opacity: 1; clip-path: inset(50% -24px -24px -24px); }
    44% { opacity: 1; clip-path: inset(-24px); }
    64% { opacity: .45; }
    68% { opacity: 1; }
    86% { opacity: .6; clip-path: inset(30% -24px 30% -24px); }
    90% { opacity: 1; clip-path: inset(-24px); } }
  @keyframes lineOut {
    0% { opacity: 1; }
    12% { opacity: .35; color: #ff3a2a; }
    24% { opacity: 1; color: #fff; clip-path: inset(0 0 55% 0); }
    38% { opacity: .25; clip-path: inset(0); }
    52% { opacity: .9; color: #ff3a2a; clip-path: inset(35% 0 20% 0); }
    70% { opacity: .5; clip-path: inset(0); color: #fff; }
    86% { opacity: .3; clip-path: inset(50% 0 0 0); }
    100% { opacity: 0; clip-path: inset(0); } }
  @keyframes igIn {
    0% { opacity: 0; }
    10% { opacity: 1; color: #ff3a2a; clip-path: inset(0 0 60% 0); }
    20% { opacity: .15; clip-path: inset(0); }
    32% { opacity: 1; color: #fff; clip-path: inset(55% 0 0 0); }
    44% { opacity: .35; clip-path: inset(0); }
    58% { opacity: 1; color: #ff3a2a; clip-path: inset(30% 0 25% 0); }
    74% { opacity: .8; clip-path: inset(0); color: #fff; }
    88%, 100% { opacity: 1; color: #fff; clip-path: inset(-12px); } }
}

/* no white flash on desktop, and no grey noise overlay anywhere (scanlines on the black stay) */
html:not(.lite) .cut .cut-flash { display: none !important; }
html .cut::after { display: none !important; }

/* ---------- phone page swap, closer to the desktop look: sliced + displaced copies of the logo and torn red bands (still transform/opacity only) ---------- */
html.lite:not(.intro) .cut-logo { filter: none; }   /* no copy / glow behind the logo */
.cut-logo-s { left: 50%; top: 50%; width: min(460px, 68vw); max-width: none; height: auto; opacity: 0; transform: translate(-50%, -50%) rotate(-5deg); will-change: transform, opacity; pointer-events: none; }
.cut-logo-s.s1 { clip-path: inset(6% 0 72% 0); } .cut-logo-s.s2 { clip-path: inset(38% 0 40% 0); } .cut-logo-s.s3 { clip-path: inset(66% 0 8% 0); }
.cut-bar { left: 0; right: 0; opacity: 0; background: rgba(190, 0, 0, .55); will-change: transform, opacity; pointer-events: none; }
html.intro .cut-logo-s, html.intro .cut-bar { display: none; }
html.lite.leaving .cut-logo-s.s1, html.lite.arriving .cut-logo-s.s1 { animation: sliceA .48s steps(1, end) both; }
html.lite.leaving .cut-logo-s.s2, html.lite.arriving .cut-logo-s.s2 { animation: sliceB .48s steps(1, end) both; }
html.lite.leaving .cut-logo-s.s3, html.lite.arriving .cut-logo-s.s3 { animation: sliceC .48s steps(1, end) both; }
html.lite.leaving .cut-bar, html.lite.arriving .cut-bar { animation: barJit .46s steps(1, end) both; }
html.lite .cut-bar:nth-of-type(2n) { animation-delay: .06s !important; } html.lite .cut-bar:nth-of-type(3n) { animation-delay: .12s !important; }
@keyframes sliceA { 0%, 100% { opacity: 0; } 8% { opacity: 1; transform: translate(calc(-50% - 38px), -50%) rotate(-5deg); } 22% { opacity: 1; transform: translate(calc(-50% + 30px), -50%) rotate(-5deg); } 38% { opacity: 0; } 55% { opacity: 1; transform: translate(calc(-50% - 20px), -50%) rotate(-5deg); } 72% { opacity: 0; } }
@keyframes sliceB { 0%, 100% { opacity: 0; } 14% { opacity: 1; transform: translate(calc(-50% + 42px), -50%) rotate(-5deg); } 30% { opacity: 0; } 46% { opacity: 1; transform: translate(calc(-50% - 32px), -50%) rotate(-5deg); } 62% { opacity: 1; transform: translate(calc(-50% + 14px), -50%) rotate(-5deg); } 80% { opacity: 0; } }
@keyframes sliceC { 0%, 100% { opacity: 0; } 6% { opacity: 1; transform: translate(calc(-50% - 26px), -50%) rotate(-5deg); } 26% { opacity: 0; } 40% { opacity: 1; transform: translate(calc(-50% + 36px), -50%) rotate(-5deg); } 58% { opacity: 0; } 70% { opacity: 1; transform: translate(calc(-50% - 12px), -50%) rotate(-5deg); } 86% { opacity: 0; } }
@keyframes barJit { 0%, 100% { opacity: 0; } 12% { opacity: 1; transform: translateX(-14%); } 28% { opacity: .6; transform: translateX(18%); } 44% { opacity: 0; } 60% { opacity: 1; transform: translateX(-8%); } 80% { opacity: 0; } }

/* no white flash on any device */
html .cut .cut-flash { display: none !important; }

/* red tear bands shift sideways: make them wider than the screen so the right/left edge is never left uncovered */
.cut-bar { left: -30%; right: -30%; }

/* ---------- phone page swap: colourful Watch-Dogs-style corruption ---------- */
.cut-bar { right: auto; opacity: 0; }
@keyframes barJit { 0%, 100% { opacity: 0; } 8% { opacity: .95; transform: translateX(-40px); } 20% { opacity: .9; transform: translateX(55px); } 32% { opacity: 0; } 44% { opacity: .95; transform: translateX(-70px); } 58% { opacity: .8; transform: translateX(30px); } 72% { opacity: 0; } 84% { opacity: .9; transform: translateX(-20px); } }
html.lite .cut-bar:nth-of-type(3n+1) { animation-delay: .03s !important; } html.lite .cut-bar:nth-of-type(3n+2) { animation-delay: .1s !important; } html.lite .cut-bar:nth-of-type(3n) { animation-delay: .17s !important; }
/* the sliced logo copies become chromatic ghosts: cyan / magenta / yellow (static hue filters on tiny cached layers) */
.cut-logo-s.s1 { filter: hue-rotate(180deg) saturate(2.2) brightness(1.4); }
.cut-logo-s.s2 { filter: hue-rotate(300deg) saturate(2.4) brightness(1.4); }
.cut-logo-s.s3 { filter: hue-rotate(55deg) saturate(2.4) brightness(1.5); }
/* the sweeping scan band: multicolour */
html.lite .cut-bg::before { background: linear-gradient(90deg, rgba(255, 31, 168, .5), rgba(0, 229, 255, .5), rgba(255, 242, 0, .45), rgba(255, 42, 42, .5)); -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent); }
/* ---------- phone page swap: real VHS tape corruption (rainbow chroma smear, white dropout streaks, tracking tear) ---------- */
.vhs-slice { left: -20%; width: 140%; opacity: 0; background-image: var(--vhs); background-size: 100% 330%; background-repeat: no-repeat; image-rendering: pixelated; will-change: transform, opacity; pointer-events: none; }
html.intro .vhs-slice { display: none; }
html.lite.leaving .vhs-slice, html.lite.arriving .vhs-slice { animation: vslice .5s steps(1, end) both; }
@keyframes vslice {
  0%, 100% { opacity: 0; }
  6% { opacity: 1; transform: translateX(-13%); }
  14% { opacity: 1; transform: translateX(11%); }
  24% { opacity: 1; transform: translateX(-4%); }
  34% { opacity: 0; }
  46% { opacity: 1; transform: translateX(15%); }
  58% { opacity: 1; transform: translateX(-9%); }
  70% { opacity: 0; }
  82% { opacity: 1; transform: translateX(5%); }
  92% { opacity: 0; } }
/* the old thin colour strips are gone */
.cut-bar { display: none !important; }
/* the sweeping tracking band is a strip of the same tape texture */
html.lite .cut-bg::before { height: 20vh; background: var(--vhs) 0 40% / 100% 500% no-repeat; image-rendering: pixelated; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }

/* ---------- phone page swap = real VHS playback glitch drawn on a canvas (js/site.js: vhsPlay) ---------- */
.vhs-cv { left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; pointer-events: none; }
html.lite .cut-logo, html.lite .cut-logo-s, html.lite .vhs-slice, html.lite .cut-bar { display: none !important; }
html.lite .cut-bg::before { display: none; }
/* VHS canvas on every device: the old DOM logo / filter glitch is not used for page swaps */
html .cut-logo, html .cut-logo-s, html .vhs-slice, html .cut-bar { display: none !important; }
html .cut-bg::before { display: none; }

/* ---------- phones: the swapped name glitches HARD for a few seconds, then settles still (no endless repainting of big glowing text) ---------- */
html.lite :is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name),
html.lite :is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-nick,
html.lite :is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-a,
html.lite :is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-b { animation-iteration-count: 2 !important; }
html.lite :is(.fighter-block, .home-card).glitching .hl-b, html.lite :is(.fighter-block, .home-card).glitching .hl-a { animation-iteration-count: 1 !important; }
/* the active name gets its own layer so the colour/slice flicker repaints only that block */
html.lite :is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) { will-change: opacity; }
/* ================================================================================================
   NAMES v2 — two stacked lines, with the nickname as a REDACTED slot between them until you tap / hover
       KIT                KIT
   ▮▮▮ TAP ▮▮▮    →    "THE RIPPA"
     SIRIKHET           SIRIKHET
   The slot is always the same height, so nothing ever moves or re-measures; only the slot glitches from the redaction bar into the nickname.
   (JS prep() builds  .fn-a  .fn-mid[.fn-nick .fn-hint]  .fn-b  inside every name.)
   ================================================================================================ */
.home-card .hc-name { --nfs: clamp(38px, 9.4vw, 62px); }
.fighter-block .fighter-name { --nfs: clamp(38px, 8.6vw, 66px); }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) { font-size: var(--nfs) !important; line-height: .9 !important; display: block !important; min-height: 0 !important; width: 100%; text-align: center; white-space: normal !important; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) :is(.fn-a, .fn-b, .fn-mid) { display: block !important; width: 100%; text-align: center; white-space: nowrap; animation: none !important; transform: none !important; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-mid { position: relative; height: 1em; margin: .04em 0; }
/* the nickname + the hint share the slot */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-mid > * { position: absolute !important; left: 0; right: 0; top: 0; bottom: 0; margin: 0 !important; display: flex !important; align-items: center; justify-content: center; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-nick { font-size: .82em !important; line-height: 1 !important; opacity: 0; transition: none !important; white-space: nowrap; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-nick::before, :is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-nick::after { display: none !important; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-nick { opacity: 1; }
/* the hint: a red redaction bar with tiny "TAP" (touch) / "HOVER" (mouse) printed on it, softly pulsing */
.fn-hint::before { content: ''; width: min(78%, 11em); height: .36em; background: #a70000; box-shadow: 0 0 10px rgba(255, 40, 30, .65), inset 0 0 0 1px rgba(255, 90, 70, .35); }
.fn-hint::after { content: 'TAP'; position: absolute; font-family: var(--hyde); font-size: .17em; letter-spacing: .5em; text-indent: .5em; color: #1a0000; font-weight: normal; line-height: 1; }
@media (hover: hover) { .fn-hint::after { content: 'HOVER'; } }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-hint { animation: hintPulse 2.4s ease-in-out infinite !important; will-change: opacity; }
@keyframes hintPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-hint { opacity: 0; animation: none !important; }
/* the old separate nickname line is gone (it lives in the slot now) */
.home-card .hc-nick, .fighter-block .fighter-nickname { display: none !important; }
/* no scale-down / no re-flow when swapped */
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) { font-size: var(--nfs) !important; min-height: 0 !important; }

/* ---------- home page: one clear path (hero → scroll → click a name → file), manifesto under the names ---------- */
.home-more { display: flex; justify-content: center; margin-top: 2.2rem; }
.hc-go { margin-top: .8rem; }
@media (hover: none) { .home-card .hc-go { padding: .55rem 1.1rem; border: 1px solid rgba(167, 0, 0, .55); background: rgba(167, 0, 0, .12); } }

/* ================================================================================================
   NAMES v3 — idle:  KIT / SIRIKHET  (+ a faint hint under it)      tap / click the name:  KIT / THE RIPPA / SIRIKHET
   Rows:  1 first name · 2 nickname · 3 last name · 4 hint.   Idle  = [auto 0 auto 1em]   Active = [auto 1em auto 0]
   so the hint's row turns into the nickname's row and the whole name block keeps ONE height: nothing below ever moves.
   ================================================================================================ */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) { display: grid !important; grid-template-columns: 100%; grid-template-rows: auto 0 auto 1em; align-items: start; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) { grid-template-rows: auto 1em auto 0; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-a { grid-row: 1; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-nick { grid-row: 2; display: block !important; position: relative !important; height: 1em; margin: 0 !important; text-align: center; white-space: nowrap; overflow: visible; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-b { grid-row: 3; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-hint { grid-row: 4; position: relative !important; display: block !important; inset: auto !important; height: 1em; margin: 0 !important; overflow: hidden; animation: hintPulse 2.6s ease-in-out infinite !important; }
/* the hint: small, faint, UNDER the name (not part of it) */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-hint::before { content: none !important; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-hint::after { content: 'TAP THE NAME'; position: static; display: block; padding-top: .3em; font-family: var(--hyde); font-size: .26em; letter-spacing: .5em; text-indent: .5em; line-height: 1; text-align: center; color: rgba(255, 70, 55, .6); text-shadow: 0 0 8px rgba(255, 40, 30, .5); }
@media (hover: hover) { :is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-hint::after { content: 'CLICK THE NAME'; } }
@keyframes hintPulse { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-hint { opacity: 0; animation: none !important; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) { cursor: pointer; }

/* ---- NAMES v3b: the pair stays TIGHT (KIT / SIRIKHET, not separated). On click the nickname is inserted between: KIT moves up, SIRIKHET moves down ---- */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) { grid-template-rows: .5em auto 0 auto .5em .6em; transition: grid-template-rows .34s cubic-bezier(.2, .8, .2, 1); }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) { grid-template-rows: 0 auto 1em auto 0 .6em; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-a { grid-row: 2; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-nick { grid-row: 3; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-b { grid-row: 4; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-hint { grid-row: 6; height: .6em; }
/* hint: quieter - smaller, dimmer, no glow, barely pulsing */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-hint::after { font-size: .2em; letter-spacing: .45em; text-indent: .45em; color: rgba(255, 255, 255, .3); text-shadow: none; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-hint { animation: hintPulse2 3.4s ease-in-out infinite !important; }
@keyframes hintPulse2 { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
/* names: ONE glitch burst when tapped (all devices), then the revealed name just sits there - no endless glitching */
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name),
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-nick,
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-a,
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-b,
:is(.fighter-block, .home-card).glitching .hl-a, :is(.fighter-block, .home-card).glitching .hl-b { animation-iteration-count: 1 !important; }
html.lite :is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name),
html.lite :is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-nick,
html.lite :is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-a,
html.lite :is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-b { animation-iteration-count: 1 !important; }
/* the hint lives next to the heading now ("(click the name)"), not under each name */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) { grid-template-rows: .5em auto 0 auto .5em; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) { grid-template-rows: 0 auto 1em auto 0; }
.fn-hint { display: none !important; }
.home-hint { font-family: var(--hyde); font-size: .62rem; letter-spacing: .32em; text-transform: uppercase; color: rgba(255, 255, 255, .42); margin: -.2rem 0 1.8rem; }
.section-label .label-hint { font-family: var(--hyde); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .42); margin-left: .9rem; font-weight: normal; }
/* "(click the name)": small, glowing */
.home-hint, .section-label .label-hint { font-size: .52rem; letter-spacing: .34em; color: #ff4a3a; text-shadow: 0 0 8px rgba(255, 60, 45, .9), 0 0 20px rgba(255, 30, 20, .55); }
.home-hint { animation: hintGlow 3s ease-in-out infinite; }
@keyframes hintGlow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
/* hint sits to the RIGHT of the heading (wraps under it on narrow phones) */
.home-titlebar { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 1.4rem; row-gap: .2rem; margin-bottom: 1.6rem; }
.home-titlebar .home-title { margin-bottom: 0; }
.home-hint { margin: 0; white-space: nowrap; }
.hh-mouse { display: none; } @media (hover: hover) { .hh-touch { display: none; } .hh-mouse { display: inline; } }
.section-label .label-hint .hh-mouse { display: none; } @media (hover: hover) { .section-label .label-hint .hh-touch { display: none; } .section-label .label-hint .hh-mouse { display: inline; } }
/* ---------- NAMES v4: a glowing [ AKA ▸ ] button under every name (the page-level hints are gone) ---------- */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) { grid-template-rows: .5em auto 0 auto .5em 2.1em; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) { grid-template-rows: 0 auto 1em auto 0 2.1em; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-btn { grid-row: 6; justify-self: center; align-self: center; display: inline-flex; align-items: center; cursor: pointer; padding: .42em 1.1em .38em; border: 1px solid rgba(255, 74, 58, .75); background: rgba(167, 0, 0, .14); color: #ff6a58; font-family: var(--hyde); font-size: .31em; letter-spacing: .38em; text-indent: .38em; line-height: 1; white-space: nowrap; text-shadow: 0 0 8px rgba(255, 60, 45, .95), 0 0 18px rgba(255, 30, 20, .6); box-shadow: 0 0 14px rgba(255, 40, 30, .55), inset 0 0 10px rgba(255, 40, 30, .25); animation: akaGlow 2.4s ease-in-out infinite !important; -webkit-tap-highlight-color: transparent; user-select: none; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-btn::after { content: 'AKA \25B8'; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-btn::after { content: 'AKA \25BE'; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-btn { background: rgba(167, 0, 0, .32); color: #fff; }
@media (hover: hover) { :is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-btn:hover { background: rgba(167, 0, 0, .35); color: #fff; box-shadow: 0 0 22px rgba(255, 40, 30, .85), inset 0 0 12px rgba(255, 40, 30, .4); } }
@keyframes akaGlow { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.home-hint, .label-hint, .home-titlebar > .home-hint { display: none !important; }
/* button wording: UNMASK (not AKA) */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-btn::after { content: 'UNMASK \25B8'; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-btn::after { content: 'UNMASKED \25BE'; }
/* smaller button */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) { grid-template-rows: .5em auto 0 auto .5em 1.55em; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) { grid-template-rows: 0 auto 1em auto 0 1.55em; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-btn { font-size: .2em; padding: .5em 1em .45em; letter-spacing: .32em; text-indent: .32em; box-shadow: 0 0 10px rgba(255, 40, 30, .5), inset 0 0 7px rgba(255, 40, 30, .22); }
/* never smaller than 10px */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-btn { font-size: max(.2em, 10px); }
/* button wording: plain "NICKNAME" */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-btn::after { content: 'NICKNAME \25B8'; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-btn::after { content: 'NICKNAME \25BE'; }
/* ---------- ALSO KNOWN AS: one-way reveal. The button glitches out and the nickname stays ---------- */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-btn::after { content: 'ALSO KNOWN AS \25B8'; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-btn::after { content: 'ALSO KNOWN AS \25B8'; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) { grid-template-rows: .4em auto 1em auto 1.15em 0; }   /* same total height as idle: nothing below moves */
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) .fn-btn { animation: btnOut .45s steps(1, end) forwards !important; pointer-events: none; }
@keyframes btnOut { 0% { opacity: 1; } 15% { opacity: .15; } 30% { opacity: 1; transform: translateX(5px); } 45% { opacity: 0; } 60% { opacity: .8; transform: translateX(-4px); } 75% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) { cursor: default; }
/* after the nickname is revealed the button's room is no longer needed: close the gap so the name sits right above the handle */
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) { grid-template-rows: .3em auto 1em auto .1em 0; }
/* tighter idle: the AKA button needs less room */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) { grid-template-rows: .3em auto 0 auto .15em 1.25em; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-btn { padding: .4em .85em .36em; letter-spacing: .26em; text-indent: .26em; }
:is(.fighter-block, .home-card).glitching :is(.fighter-name, .hc-name) { grid-template-rows: .3em auto 1em auto .1em 0; }
/* more compact button + row */
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) { grid-template-rows: .25em auto 0 auto .1em 1.05em; }
:is(.fighter-block, .home-card) :is(.fighter-name, .hc-name) .fn-btn { padding: .34em .7em .3em; letter-spacing: .15em; text-indent: .15em; }
/* ---------- "See the file →": a real boxed button with a hard glow ---------- */
.home-card .hc-go { display: inline-block; align-self: center; margin-top: 1rem; padding: .75rem 1.6rem; border: 1px solid #ff4a3a; background: rgba(167, 0, 0, .22); color: #fff; letter-spacing: .08em; text-shadow: 0 0 10px rgba(255, 60, 45, 1), 0 0 24px rgba(255, 30, 20, .9); box-shadow: 0 0 18px rgba(255, 40, 30, .8), 0 0 42px rgba(200, 0, 0, .55), inset 0 0 16px rgba(255, 40, 30, .35); transition: box-shadow .25s, background .25s; }
.home-card .hc-go:hover, .home-card:hover .hc-go { background: rgba(200, 0, 0, .4); box-shadow: 0 0 26px rgba(255, 60, 45, 1), 0 0 64px rgba(230, 0, 0, .8), inset 0 0 20px rgba(255, 60, 45, .5); }
.home-manifesto { padding-top: 6rem; }
.home-manifesto .manifesto-grid { margin-bottom: 1rem; }
/* manifesto heading: white all the way until it hits BLOOD, and BLOOD is red */
.manifesto-heading { color: var(--white); text-shadow: 0 0 1px rgba(255, 255, 255, .8), 0 0 10px rgba(255, 42, 42, .35), 1px 1px 0 #000; }
.manifesto-heading .blood { color: var(--red); text-shadow: 0 0 14px rgba(255, 30, 20, .9), 0 0 34px rgba(167, 0, 0, .7), 1px 1px 0 #000; }
/* "See the file": same font as HEAVYWEIGHT / LIGHT MIDDLEWEIGHT */
.home-card .hc-go { font-family: var(--hyde); text-transform: uppercase; letter-spacing: .22em; text-indent: .22em; font-size: clamp(.8rem, 2vw, 1rem); }
/* ---------- scroll cue: plain text + a bobbing arrow (replaces the little mouse pill) ---------- */
.scroll-cue { position: absolute; left: 0; right: 0; bottom: 1.5rem; width: auto; height: auto; transform: none; border: 0; border-radius: 0; display: flex; flex-direction: column; align-items: center; gap: .55rem; text-decoration: none; opacity: 0; animation: cueIn .8s 1.8s ease forwards; z-index: 3; }
.scroll-cue::after { display: none !important; }
.scroll-cue span { font-family: var(--hyde); font-size: .72rem; letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px rgba(255, 60, 45, .9), 0 0 24px rgba(255, 30, 20, .55); }
.scroll-cue i { display: block; width: 13px; height: 13px; border-right: 2px solid #ff4a3a; border-bottom: 2px solid #ff4a3a; transform: rotate(45deg); filter: drop-shadow(0 0 6px rgba(255, 60, 45, .9)); animation: cueBob 1.5s ease-in-out infinite; }
@keyframes cueIn { to { opacity: 1; } }
@keyframes cueBob { 0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .45; } 50% { transform: rotate(45deg) translate(5px, 5px); opacity: 1; } }
.scroll-cue span { font-size: .9rem; }
.scroll-cue i { width: 15px; height: 15px; }

/* scroll cue now FOLLOWS you (fixed) and names the next section */
.scroll-cue { position: fixed; bottom: 0; left: 0; right: 0; padding: 2.2rem 0 1rem; background: linear-gradient(to top, rgba(6, 6, 6, .85), rgba(6, 6, 6, 0)); transition: opacity .35s; z-index: 90; }
.scroll-cue.gone { opacity: 0 !important; pointer-events: none; animation: none; }
.scroll-cue span { display: inline-block; }
.scroll-cue.swap span { animation: cueSwap .4s steps(1, end); }
@keyframes cueSwap { 0% { opacity: 0; clip-path: inset(0 0 55% 0); } 20% { opacity: 1; clip-path: inset(50% 0 0 0); } 40% { opacity: .3; clip-path: inset(0); } 60% { opacity: 1; } 100% { opacity: 1; clip-path: none; } }
/* the cue's fade must never block taps on what is underneath (e.g. the See-the-file buttons): only the text + arrow are tappable */
.scroll-cue { pointer-events: none; }
.scroll-cue span, .scroll-cue i { pointer-events: auto; cursor: pointer; }
@media (max-width: 768px) { .scroll-cue { padding: 1.8rem 0 .8rem; bottom: env(safe-area-inset-bottom, 0); } .scroll-cue span { font-size: .8rem; } }

/* ---------- pinned cue v2: BACK (up) + NEXT (down) ---------- */
.scroll-cue { flex-direction: row; justify-content: center; align-items: flex-end; gap: 2.4rem; }
.scroll-cue a { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: .55rem; pointer-events: auto; cursor: pointer; }
.scroll-cue a.off { display: none; }
.scroll-cue.gone { opacity: 1 !important; pointer-events: none; }
.cue-up span { color: rgba(255, 255, 255, .7); font-size: .75rem; }
.cue-up i { border-right: 0 !important; border-bottom: 0 !important; border-left: 2px solid #ff4a3a; border-top: 2px solid #ff4a3a; animation: cueBobUp 1.5s ease-in-out infinite !important; }
@keyframes cueBobUp { 0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .45; } 50% { transform: rotate(45deg) translate(-5px, -5px); opacity: 1; } }
.scroll-cue.swap span { animation: none; }
.cue-next.swap span { animation: cueSwap .4s steps(1, end); }
.scroll-cue span, .scroll-cue i { pointer-events: none; }
@media (max-width: 768px) { .scroll-cue { gap: 1.8rem; } .cue-up span { font-size: .66rem; } }
@media (max-width: 768px) { .cue-next span { letter-spacing: .28em; text-indent: .28em; font-size: .72rem; } }

/* the cue sits above every piece of page content (nav 100 / mobile menu 99 / ticker stay above it) */
.scroll-cue { z-index: 95; }

/* ---------- cue moved to the RIGHT edge (small, so it never sits over the content) ---------- */
.scroll-cue { left: auto; right: 1rem; bottom: 1.2rem; width: auto; padding: .7rem .9rem; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: .9rem; background: rgba(6, 6, 6, .62); border: 1px solid rgba(167, 0, 0, .4); border-radius: 12px; box-shadow: 0 0 18px rgba(0, 0, 0, .7); }
.scroll-cue a { align-items: flex-end; text-align: right; }
.scroll-cue span { max-width: 10.5rem; text-align: right; text-indent: 0; letter-spacing: .3em; line-height: 1.5; font-size: .72rem; white-space: normal; }
.cue-up { flex-direction: column; }
.scroll-cue i { margin-right: .25rem; }
@media (max-width: 768px) { .scroll-cue { right: .6rem; bottom: calc(.8rem + env(safe-area-inset-bottom, 0px)); padding: .55rem .7rem; } .scroll-cue span { max-width: 8.5rem; font-size: .62rem; letter-spacing: .24em; } .cue-up span { font-size: .6rem; } }
/* ---------- cue = a SLIM rail on the right edge (vertical text), with a reserved gutter so it never overlaps content ---------- */
.scroll-cue { right: 6px; bottom: 1rem; padding: .6rem .35rem; gap: .9rem; align-items: center; border-radius: 10px; background: rgba(8, 4, 4, .94); width: auto; }
.scroll-cue a { align-items: center; gap: .5rem; }
.scroll-cue span { writing-mode: vertical-rl; max-width: none; max-height: 15rem; white-space: nowrap; text-align: left; letter-spacing: .26em; font-size: .62rem; line-height: 1; }
.cue-next span { transform: rotate(180deg); }
.cue-up span { transform: rotate(180deg); }
.scroll-cue i { margin-right: 0; }
@media (max-width: 768px) { .scroll-cue { right: 3px; padding: .5rem .3rem; } .scroll-cue span { font-size: .56rem; max-height: 13rem; } }

/* ---------- cue v3: small, READABLE, bottom-right. horizontal text, opaque pill ---------- */
.scroll-cue { right: .8rem; bottom: .9rem; padding: .65rem .8rem; gap: .7rem; align-items: flex-end; border-radius: 10px; background: rgba(8, 4, 4, .96); border: 1px solid rgba(255, 74, 58, .55); box-shadow: 0 0 16px rgba(255, 40, 30, .35), 0 6px 18px rgba(0, 0, 0, .8); }
.scroll-cue a { align-items: flex-end; gap: .4rem; }
.scroll-cue span { writing-mode: horizontal-tb; transform: none !important; max-width: 9rem; max-height: none; white-space: normal; text-align: right; letter-spacing: .14em; font-size: .78rem; line-height: 1.35; color: #fff; }
.cue-up span { font-size: .72rem; color: rgba(255, 255, 255, .85); }
@media (max-width: 768px) { .scroll-cue { right: .5rem; bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); padding: .55rem .65rem; } .scroll-cue span { max-width: 7.6rem; font-size: .72rem; letter-spacing: .1em; } .cue-up span { font-size: .68rem; } }
/* ---------- cue v4: NO container. Each arrow is its own glowing box; the label just floats beside it ---------- */
.scroll-cue { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; gap: .7rem !important; align-items: flex-end !important; right: .9rem; bottom: 1rem; }
.scroll-cue a { flex-direction: row !important; align-items: center !important; gap: .75rem !important; }
.scroll-cue a.cue-up { flex-direction: row-reverse !important; }
.scroll-cue span { max-width: 9.5rem; text-align: right; font-size: .78rem; letter-spacing: .14em; color: #fff; text-shadow: 0 0 6px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .9), 0 0 16px rgba(255, 40, 30, .75); }
.cue-up span { text-align: right; }
.scroll-cue i { width: 44px !important; height: 44px !important; border: 1px solid #ff4a3a !important; border-radius: 9px; background: rgba(8, 4, 4, .92); box-shadow: 0 0 14px rgba(255, 40, 30, .6), inset 0 0 10px rgba(255, 40, 30, .22); position: relative; transform: none !important; animation: none !important; filter: none !important; margin: 0 !important; flex: 0 0 auto; }
.scroll-cue i::before { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-right: 2px solid #ff6a58; border-bottom: 2px solid #ff6a58; transform: translate(-50%, -68%) rotate(45deg); animation: arrowDown 1.5s ease-in-out infinite; }
.cue-up i::before { border-right: 0; border-bottom: 0; border-left: 2px solid #ff6a58; border-top: 2px solid #ff6a58; transform: translate(-50%, -32%) rotate(45deg); animation: arrowUp 1.5s ease-in-out infinite; }
@keyframes arrowDown { 0%, 100% { transform: translate(-50%, -68%) rotate(45deg); opacity: .55; } 50% { transform: translate(-50%, -38%) rotate(45deg); opacity: 1; } }
@keyframes arrowUp { 0%, 100% { transform: translate(-50%, -32%) rotate(45deg); opacity: .55; } 50% { transform: translate(-50%, -62%) rotate(45deg); opacity: 1; } }
@media (max-width: 768px) { .scroll-cue { right: .6rem; bottom: calc(.7rem + env(safe-area-inset-bottom, 0px)); } .scroll-cue span { max-width: 7.2rem; font-size: .7rem; letter-spacing: .1em; } .scroll-cue i { width: 40px !important; height: 40px !important; } }
/* the up arrow back to the hero: the logo instead of text */
.cue-up span img { display: block; height: 40px; width: auto; filter: brightness(1.35) drop-shadow(0 0 8px rgba(255, 60, 45, .8)) drop-shadow(0 0 2px rgba(0, 0, 0, .9)); }
@media (max-width: 768px) { .cue-up span img { height: 34px; } }

/* ---------- hero: the LOGO replaces the "SLASHER INC." text ---------- */
.hero-title { font-size: 0; line-height: 0; text-shadow: none !important; }
.hero-title .hero-logo { display: block; width: clamp(250px, 46vw, 540px); height: auto; filter: drop-shadow(0 0 18px rgba(167, 0, 0, .5)); }
.hero-title::before, .hero-title::after { display: none !important; }
.hero-title .glowcopy { z-index: -1; text-shadow: none; }
.hero-title .glowcopy img { display: block; width: clamp(250px, 46vw, 540px); height: auto; filter: blur(24px) brightness(1.7) saturate(1.3); }
@media (max-width: 768px) { .hero-title .hero-logo, .hero-title .glowcopy img { width: min(78vw, 400px); } }
/* phones: keep the whole intro on one screen: eyebrow, logo, divider AND the "you want em gone" line */
@media (max-width: 768px) {
  .hero-title .hero-logo, .hero-title .glowcopy img { width: min(58vw, 270px); }
  .hero { padding-top: 7rem; padding-bottom: 5.5rem; min-height: 0; }
  .hero-divider { margin: 1.2rem 0 !important; }
  .hero-eyebrow { margin-bottom: 1rem !important; }
}
@media (max-width: 768px) { .hero { min-height: 100svh; } }

/* the logo never gets so tall that the quote below it falls off the first screen (sized by viewport HEIGHT too) */
.hero-title .hero-logo, .hero-title .glowcopy img { width: clamp(200px, min(46vw, 50vh), 540px); }
@media (max-width: 768px) { .hero-title .hero-logo, .hero-title .glowcopy img { width: clamp(180px, min(58vw, 40vh), 270px); } }
.hero-divider { margin-top: clamp(.8rem, 2.5vh, 2rem) !important; margin-bottom: clamp(.8rem, 2.5vh, 2rem) !important; }
/* in-app browsers (Instagram etc.): if the logo image ever fails to load, never show blue link text / a focus outline instead of it */
.nav-logo, .nav-logo:visited, .nav-logo:focus, .nav-logo:active { color: transparent !important; font-size: 0 !important; text-decoration: none !important; outline: none !important; -webkit-tap-highlight-color: transparent; }
.nav-logo img { display: block; height: auto; }
.footer-logo, .footer-logo a { color: transparent; font-size: 0; outline: none; text-decoration: none; }
.nav-logo img { height: 48px; width: auto; max-width: 120px; }

/* ---------- WALKOUT ---------- */
.walkout { display: flex; flex-direction: column; align-items: center; margin: .2rem 0 1.1rem; }
.wo-btn { font-family: var(--hyde); text-transform: uppercase; letter-spacing: .22em; text-indent: .22em; font-size: clamp(.8rem, 2vw, .95rem); color: #fff; padding: .7rem 1.5rem; border: 1px solid #ff4a3a; background: rgba(167, 0, 0, .22); cursor: pointer; text-shadow: 0 0 10px rgba(255, 60, 45, 1), 0 0 22px rgba(255, 30, 20, .85); box-shadow: 0 0 16px rgba(255, 40, 30, .75), 0 0 38px rgba(200, 0, 0, .45), inset 0 0 14px rgba(255, 40, 30, .3); -webkit-tap-highlight-color: transparent; transition: box-shadow .25s, background .25s; }
.wo-btn:hover { background: rgba(200, 0, 0, .4); box-shadow: 0 0 24px rgba(255, 60, 45, 1), 0 0 56px rgba(230, 0, 0, .75), inset 0 0 18px rgba(255, 60, 45, .5); }
.walkout.open .wo-btn { display: none; }
.wo-player { width: 100%; max-width: 420px; }
.wo-player iframe { display: block; width: 100%; height: 80px; border: 0; border-radius: 12px; box-shadow: 0 0 18px rgba(255, 40, 30, .45); animation: woIn .45s steps(1, end); }
@keyframes woIn { 0% { opacity: 0; } 20% { opacity: 1; } 35% { opacity: .2; } 55% { opacity: 1; } }
.wo-player iframe[src*='soundcloud'] { height: 120px; }

/* custom walkout player */
.wo-card { display: flex; align-items: center; gap: .9rem; width: 100%; padding: .7rem; background: rgba(8, 4, 4, .92); border: 1px solid #ff4a3a; border-radius: 12px; box-shadow: 0 0 18px rgba(255, 40, 30, .55), inset 0 0 12px rgba(255, 40, 30, .18); animation: woIn .45s steps(1, end); }
.wo-art { flex: 0 0 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #0a0505; box-shadow: 0 0 10px rgba(255, 40, 30, .5); }
.wo-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wo-info { flex: 1; min-width: 0; text-align: left; }
.wo-title { font-family: var(--carnage); font-size: 1.15rem; letter-spacing: .04em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 10px rgba(255, 50, 40, .8); }
.wo-bar { position: relative; height: 6px; margin: .55rem 0 .35rem; background: rgba(255, 255, 255, .14); border-radius: 3px; cursor: pointer; }
.wo-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #ff3a2a; border-radius: 3px; box-shadow: 0 0 10px rgba(255, 40, 30, .9); }
.wo-time { font-family: var(--hyde); font-size: .62rem; letter-spacing: .2em; color: rgba(255, 255, 255, .6); }
.wo-play { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #ff4a3a; background: rgba(167, 0, 0, .3); color: #fff; font-size: .9rem; cursor: pointer; box-shadow: 0 0 14px rgba(255, 40, 30, .8), inset 0 0 8px rgba(255, 40, 30, .35); text-shadow: 0 0 8px rgba(255, 60, 45, 1); -webkit-tap-highlight-color: transparent; }
.wo-play:hover { background: rgba(220, 0, 0, .5); }
.wo-player.playing .wo-art { animation: woPulse 1.6s ease-in-out infinite; }
@keyframes woPulse { 0%, 100% { box-shadow: 0 0 8px rgba(255, 40, 30, .5); } 50% { box-shadow: 0 0 20px rgba(255, 60, 45, 1); } }
.wo-hidden { position: absolute; width: 1px; height: 1px; left: -9999px; top: 0; opacity: 0; pointer-events: none; border: 0; }
.wo-player { position: relative; }
/* ---- smooth open: the player is preloaded + collapsed; the tap crossfades the button into the card (opacity / transform / height, eased) ---- */
.wo-card { animation: none !important; }
.walkout { overflow: visible; }
.wo-btn { max-height: 90px; transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1), max-height .4s cubic-bezier(.2, .8, .2, 1) .08s, padding .4s .08s, margin .4s .08s, box-shadow .25s, background .25s; will-change: opacity, transform; }
.walkout.open .wo-btn { display: inline-block !important; opacity: 0; transform: scale(.92); pointer-events: none; max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; overflow: hidden; }
.walkout[data-sc] .wo-player { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(10px) scale(.98); pointer-events: none; transition: max-height .55s cubic-bezier(.2, .8, .2, 1), opacity .35s ease .08s, transform .55s cubic-bezier(.2, .8, .2, 1); will-change: opacity, transform; }
.walkout[data-sc].open .wo-player { max-height: 140px; opacity: 1; transform: none; pointer-events: auto; overflow: visible; }
.wo-artist { font-family: var(--hyde); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .75); margin-top: .2rem; text-shadow: 0 0 8px rgba(255, 40, 30, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-artist:empty { display: none; }

.wo-spotify { display: inline-block; margin-top: .7rem; font-family: var(--hyde); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: #fff; text-decoration: none; padding: .45rem .9rem; border: 1px solid rgba(255, 74, 58, .7); border-radius: 6px; background: rgba(167, 0, 0, .15); text-shadow: 0 0 8px rgba(255, 60, 45, .9); box-shadow: 0 0 10px rgba(255, 40, 30, .45); }
.wo-spotify:hover { background: rgba(200, 0, 0, .35); box-shadow: 0 0 16px rgba(255, 60, 45, .8); }
.wo-audio { display: none; }
.wo-player { text-align: center; }

.wo-spotify svg { width: 15px; height: 15px; fill: #1db954; vertical-align: -3px; margin-right: .5rem; filter: drop-shadow(0 0 5px rgba(29, 185, 84, .7)); }

/* Spotify-embed players get the same preloaded + collapsed + eased open as the others */
.walkout.pre .wo-player { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(10px) scale(.98); pointer-events: none; transition: max-height .55s cubic-bezier(.2, .8, .2, 1), opacity .35s ease .08s, transform .55s cubic-bezier(.2, .8, .2, 1); will-change: opacity, transform; }
.walkout.pre.open .wo-player { max-height: 170px; opacity: 1; transform: none; pointer-events: auto; overflow: visible; }
.wo-sp iframe { display: block; width: 100%; height: 80px; border: 0; border-radius: 12px; box-shadow: 0 0 18px rgba(255, 40, 30, .45); }
.wo-sp-hidden { position: absolute; left: -9999px; top: 0; width: 300px; height: 80px; opacity: 0; pointer-events: none; overflow: hidden; }

/* the Spotify frame sits INSIDE the viewport (stacked invisibly behind the card) so browsers treat it as visible and let it play; if it still will not start, JS reveals it */
.wo-player { position: relative; }
.wo-sp-hidden { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 80px; opacity: .01; pointer-events: none; overflow: hidden; z-index: 0; }
.wo-sp-hidden iframe { width: 100% !important; height: 80px !important; }
.wo-sp-hidden.show { position: relative; opacity: 1; pointer-events: auto; margin-top: .7rem; z-index: 1; border-radius: 12px; box-shadow: 0 0 18px rgba(255, 40, 30, .5); }
.wo-card { position: relative; z-index: 2; }