/* ZOR — Esports stage background. PC: 3D operators under a spotlight on a tactical floor, with HUD lock-on.
   Mobile: XYLOX / SLAYR wordmarks. Visual only — remove the <link>/<script> from the pages to turn it off. */
.zbg-stage {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  opacity: 0; transform: scale(1.012);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  --hc: 232, 40, 63;
}
.zbg-stage.is-on {
  opacity: 1;
  transform: scale(1);
}
html.fx-leaving .zbg-stage {
  opacity: 0.82;
  transform: scale(0.985);
  transition: opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1), transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.zbg-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 40%, rgba(10,12,16,.78) 100%); }
.zbg-fx { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }

/* ---------- Stage: floor grid + spotlight ---------- */
.zbg-floorgrid { position: absolute; left: -30%; width: 160%; bottom: 0; height: 46vh; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
  background: linear-gradient(rgba(63,224,208,.2) 1px, transparent 1px) 0 0/100% 56px, linear-gradient(90deg, rgba(63,224,208,.16) 1px, transparent 1px) 0 0/56px 100%;
  -webkit-mask: linear-gradient(to top, #000, transparent 92%); mask: linear-gradient(to top, #000, transparent 92%); animation: zbg-grid 5s linear infinite; }
.zbg-spot { position: absolute; top: -6vh; left: 0; width: 60vh; height: 112vh; margin-left: -30vh; filter: blur(12px); mix-blend-mode: screen;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); background: linear-gradient(to bottom, rgba(235,245,255,.17), rgba(var(--hc),.06) 62%, transparent); animation: zbg-flick 7s ease-in-out infinite; }
.zbg-hud { position: absolute; left: 18px; bottom: 16px; font: 600 10.5px/1.5 var(--font-display); letter-spacing: .16em; color: rgba(63,224,208,.55); white-space: pre; }

/* ---------- 3D operators ---------- */
.zbg-3d { position: absolute; inset: 0; perspective: 1400px; perspective-origin: 50% 40%; z-index: 2; }
.zbg-char {
  position: absolute; left: 0; bottom: 0;
  transform-origin: 50% 100%; transform-style: preserve-3d;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.zbg-body{position:absolute;inset:0;animation:zbg-reveal 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.25s + var(--i,0) * .18s)}
.zbg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 1px rgba(var(--c),.9)) drop-shadow(0 6px 22px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(var(--c),.28))}
.zbg-ghost{position:absolute;inset:0;opacity:.22;background:rgb(var(--c));mix-blend-mode:screen;
  -webkit-mask:var(--img) center/contain no-repeat;mask:var(--img) center/contain no-repeat;
  transform:translate(calc(var(--gx,0) * 1px),calc(var(--gy,0) * 1px))}
.zbg-sweep{position:absolute;inset:0;mix-blend-mode:screen;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%) 150% 0/300% 100% no-repeat;
  -webkit-mask:var(--img) center/contain no-repeat;mask:var(--img) center/contain no-repeat;animation:zbg-sweep 9s ease-in-out infinite;animation-delay:var(--d,0s)}
.zbg-glow{position:absolute;left:50%;bottom:-3%;width:140%;height:16%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(var(--c),.4),transparent 68%)}
.zbg-ring{position:absolute;left:50%;bottom:-3%;width:96%;aspect-ratio:1;transform:translateX(-50%) rotateX(74deg);border-radius:50%;
  border:2px solid rgba(var(--c),.8);box-shadow:0 0 16px rgba(var(--c),.5)}
.zbg-ring::after{content:"";position:absolute;inset:9%;border-radius:50%;border:3px dashed rgba(255,255,255,.35);animation:zbg-spin 24s linear infinite}
.zbg-stage.is-swap .zbg-img{animation:zbg-flash .7s ease-out}

/* ---------- Performance mode (PC): silhouette / shadow only, no full character art ----------
   Keeps the same poses via CSS mask on .zbg-ghost; hides heavy <img> decode/paint. */
html.perf-mode-performance .zbg-img{
  opacity:0 !important;
  visibility:hidden;
  pointer-events:none;
}
html.perf-mode-performance .zbg-sweep{
  display:none !important;
}
html.perf-mode-performance .zbg-ghost{
  opacity:.55;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 12px rgba(var(--c),.45)) drop-shadow(0 8px 24px rgba(0,0,0,.55));
}
html.perf-mode-performance .zbg-glow{
  opacity:.85;
}
html.perf-mode-performance .zbg-stage.is-swap .zbg-img{
  animation:none;
}

/* ---------- Mobile Performance: deeper cut for smoothness ---------- */
html.perf-mode-performance .zbg-stage--mobile-perf .zbg-row{
  animation:zbg-drift var(--t,70s) linear infinite;
  -webkit-text-stroke:1px rgba(var(--c),.4);
  font-size:18vw;
  background:none;
  -webkit-background-clip:unset;
  background-clip:unset;
}
html.perf-mode-performance .zbg-stage--mobile-perf .zbg-row--b{
  animation-direction:reverse;
}
html.perf-mode-performance .zbg-stage--mobile-perf .zbg-dline{
  animation:zbg-dline 12s linear infinite;
  opacity:.45;
}
html.perf-mode-performance .zbg-stage--mobile-perf .zbg-fx,
html.perf-mode-performance .zbg-stage--mobile-perf .zbg-mgrid,
html.perf-mode-performance .zbg-stage--mobile-perf .zbg-mline{
  display:none !important;
}
html.perf-mode-performance .fx-particles{
  display:none;
}
@media (max-width:860px){
  html.perf-mode-performance .fx-progress{
    opacity:.5;
  }
}

/* ---------- HUD lock-on ---------- */
.zbg-lock{position:absolute;left:0;top:0;opacity:0;transition:opacity .4s;--b:rgb(var(--hc));
  background:linear-gradient(var(--b),var(--b)) 0 0/22px 2px,linear-gradient(var(--b),var(--b)) 0 0/2px 22px,linear-gradient(var(--b),var(--b)) 100% 0/22px 2px,linear-gradient(var(--b),var(--b)) 100% 0/2px 22px,
  linear-gradient(var(--b),var(--b)) 0 100%/22px 2px,linear-gradient(var(--b),var(--b)) 0 100%/2px 22px,linear-gradient(var(--b),var(--b)) 100% 100%/22px 2px,linear-gradient(var(--b),var(--b)) 100% 100%/2px 22px;
  background-repeat:no-repeat}
.zbg-lock::before,.zbg-lock::after{position:absolute;font:600 11px var(--font-display);letter-spacing:.22em}
.zbg-lock::before{content:attr(data-tag);top:-24px;left:0;color:rgb(var(--hc))}
.zbg-lock::after{content:"LOCKED";bottom:-22px;right:0;color:rgba(236,238,242,.5)}
.zbg-lock.is-snap{animation:zbg-snap .6s cubic-bezier(.2,.9,.3,1)}

@keyframes zbg-grid{to{background-position:0 56px,56px 0}}
@keyframes zbg-flick{0%,100%{opacity:.9}48%{opacity:1}50%{opacity:.7}52%{opacity:1}}
@keyframes zbg-reveal{0%{clip-path:inset(100% -20% -10% -20%);filter:brightness(2.2) saturate(.4)}100%{clip-path:inset(-10% -20% -10% -20%);filter:none}}
@keyframes zbg-sweep{0%,60%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes zbg-spin{to{transform:rotate(360deg)}}
@keyframes zbg-flash{0%{transform:translateX(-14px);filter:brightness(2) drop-shadow(0 0 20px rgba(var(--c),.9))}100%{transform:none}}
@keyframes zbg-snap{0%{opacity:0;transform:var(--t) scale(1.18)}100%{opacity:1;transform:var(--t) scale(1)}}

/* ---------- Mobile / touch: XYLOX & SLAYR ---------- */
.zbg-words{position:absolute;inset:0;font-family:var(--font-display);font-weight:700;line-height:.9;white-space:nowrap}
.zbg-words-wrap{position:absolute;inset:0;will-change:transform}
.zbg-mgrid{position:absolute;inset:0;background:linear-gradient(rgba(63,224,208,.07) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(63,224,208,.07) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask:linear-gradient(#000,transparent 85%);mask:linear-gradient(#000,transparent 85%)}
.zbg-row{position:absolute;left:0;width:max-content;font-size:22vw;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1.2px rgba(var(--c),.5);
  background:linear-gradient(100deg,transparent 42%,rgba(var(--c),.35) 50%,transparent 58%) 0 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text;
  animation:zbg-drift var(--t,44s) linear infinite,zbg-shine 7s ease-in-out infinite}
.zbg-row--a{--c:63,224,208;top:calc(50% - 34vw)}
.zbg-row--b{--c:232,40,63;top:calc(50% + 14vw);--t:52s;animation-direction:reverse,normal;animation-delay:0s,3s}
.zbg-row span{display:inline-block;padding-right:.35em}
.zbg-mline{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgb(232,40,63),rgb(63,224,208),transparent);opacity:.6}
.zbg-mline--t{top:0}.zbg-mline--b{bottom:0}
html.fx-booting.fx-dir-fwd .zbg-words { animation: zbg-in-r 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
html.fx-booting.fx-dir-back .zbg-words { animation: zbg-in-l 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes zbg-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes zbg-shine { 0% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
@keyframes zbg-in-r { from { opacity: 0; transform: translate3d(22vw, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes zbg-in-l { from { opacity: 0; transform: translate3d(-22vw, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

@media (prefers-reduced-motion:reduce){.zbg-floorgrid,.zbg-spot,.zbg-body,.zbg-sweep,.zbg-ring::after,.zbg-row,.zbg-lock{animation:none}}


/* ---------- v6: operator names behind each character (PC) ---------- */
.zbg-name{position:absolute;left:50%;top:1%;transform:translateX(-50%);font:700 var(--nf,120px)/1 var(--font-display);letter-spacing:.06em;white-space:nowrap;pointer-events:none;
  color:rgba(var(--c),.1);-webkit-text-stroke:2px rgba(var(--c),.6);text-shadow:0 0 34px rgba(var(--c),.35)}

/* ---------- v6: tilted 45deg words + lines (mobile) ---------- */
.zbg-tilt{position:absolute;left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;transform:rotate(-45deg)}
.zbg-dline{position:absolute;left:0;width:100%;height:2px;opacity:.7;background:linear-gradient(90deg,transparent,rgba(var(--c),.9),transparent) 0 0/70vw 100% repeat-x;animation:zbg-dline 7s linear infinite}
.zbg-dline--1{--c:63,224,208;top:calc(50% - 11vw)}
.zbg-dline--2{--c:235,240,255;top:calc(50% - 8.5vw);opacity:.45}
.zbg-dline--3{--c:232,40,63;top:calc(50% + 9vw)}
@keyframes zbg-dline{to{background-position:70vw 0}}
@media (prefers-reduced-motion:reduce){.zbg-dline{animation:none}}

/* v6.1: "ZONE OF REVENGE" row between XYLOX and SLAYR (mobile) */
.zbg-row--c{--c:235,240,255;--t:60s;top:calc(50% - 4vw);font-size:9vw;letter-spacing:.14em;-webkit-text-stroke:1px rgba(var(--c),.6)}

/* ---------- Mobile subtle background blur (MAX & Performance modes) ----------
   Defocuses background letters & beams gently (blur 6px) so foreground tab contents,
   cards, and text are crisp and legible. PC (>860px) stays unblurred. */
@media (max-width: 860px) {
  .zbg-stage,
  .zbg-stage--mobile-perf,
  html.perf-mode-max .zbg-stage,
  html.perf-mode-performance .zbg-stage,
  html[data-perf-mode="max"] .zbg-stage,
  html[data-perf-mode="performance"] .zbg-stage {
    inset: -8px !important;
    filter: blur(2px) !important;
    -webkit-filter: blur(2px) !important;
    transform: translateZ(0);
    will-change: filter;
  }

  /* Ambient Red & Blue lighting base wash behind words and blur */
  .zbg-stage::before {
    content: "";
    position: absolute;
    inset: -15%;
    z-index: -1;
    pointer-events: none;
    background:
      /* Upper-Right Red Neon Glow */
      radial-gradient(ellipse 75vw 65vh at 90% 16%, rgba(232, 40, 63, 0.45) 0%, rgba(232, 40, 63, 0.18) 40%, transparent 72%),
      /* Lower-Left Electric Blue Glow */
      radial-gradient(ellipse 80vw 70vh at 10% 84%, rgba(30, 140, 255, 0.5) 0%, rgba(63, 224, 208, 0.22) 42%, transparent 74%),
      /* Center diagonal duel-tone wash */
      linear-gradient(135deg, rgba(232, 40, 63, 0.1) 0%, transparent 46%, rgba(30, 140, 255, 0.1) 100%);
    animation: zbg-light-pulse 9s ease-in-out infinite alternate;
  }

  .zbg-stage::after,
  html.perf-mode-max .zbg-stage::after,
  html.perf-mode-performance .zbg-stage::after {
    background: radial-gradient(ellipse at 50% 50%, rgba(10, 12, 16, 0.32) 0%, rgba(10, 12, 16, 0.8) 100%) !important;
  }
}

/* ---------- Mobile Red & Blue Spotlight Elements (behind blur) ---------- */
.zbg-lights {
  position: absolute;
  inset: -15%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.zbg-light {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Red lighting (Upper right / top flank) */
.zbg-light--red {
  top: 6%;
  right: -8%;
  width: 85vw;
  height: 85vw;
  max-width: 520px;
  max-height: 520px;
  background: radial-gradient(circle, rgba(232, 40, 63, 0.68) 0%, rgba(232, 40, 63, 0.32) 40%, rgba(232, 40, 63, 0.08) 65%, transparent 80%);
  filter: blur(24px);
  -webkit-filter: blur(24px);
  animation: zbg-glow-red 9s ease-in-out infinite alternate;
}

/* Blue lighting (Lower left / bottom flank) */
.zbg-light--blue {
  bottom: 8%;
  left: -10%;
  width: 90vw;
  height: 90vw;
  max-width: 540px;
  max-height: 540px;
  background: radial-gradient(circle, rgba(30, 140, 255, 0.7) 0%, rgba(63, 224, 208, 0.34) 42%, rgba(30, 140, 255, 0.08) 68%, transparent 80%);
  filter: blur(26px);
  -webkit-filter: blur(26px);
  animation: zbg-glow-blue 11s ease-in-out infinite alternate;
}

@keyframes zbg-light-pulse {
  0% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.04); }
  100% { opacity: 0.8; transform: scale(0.98); }
}

@keyframes zbg-glow-red {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  50% { transform: translate3d(-18px, 20px, 0) scale(1.1); opacity: 1; }
  100% { transform: translate3d(12px, -14px, 0) scale(0.96); opacity: 0.82; }
}

@keyframes zbg-glow-blue {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  50% { transform: translate3d(20px, -18px, 0) scale(1.12); opacity: 1; }
  100% { transform: translate3d(-14px, 14px, 0) scale(0.95); opacity: 0.82; }
}

/* Performance mode: gentle 20s GPU float */
html.perf-mode-performance .zbg-light--red,
html.perf-mode-performance .zbg-light--blue {
  animation-duration: 20s;
  filter: blur(18px);
  -webkit-filter: blur(18px);
}

@media (prefers-reduced-motion: reduce) {
  .zbg-stage::before,
  .zbg-light--red,
  .zbg-light--blue,
  .zbg-aura,
  .zbg-pc-lighting {
    animation: none !important;
  }
}

/* ---------- PC MAX mode: Volumetric Character Backlight Aura ---------- */
.zbg-aura {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 140%;
  height: 95%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(var(--c), 0.52) 0%, rgba(var(--c), 0.22) 44%, transparent 72%);
  filter: blur(24px);
  -webkit-filter: blur(24px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: zbg-aura-breathe 6s ease-in-out infinite alternate;
}

@keyframes zbg-aura-breathe {
  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.98); opacity: 0.85; }
}

html.perf-mode-performance .zbg-aura {
  display: none !important;
}

/* ---------- PC MAX mode: Character Stage Lighting Effect (Behind characters) ---------- */
.zbg-pc-lighting {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; /* Strictly behind .zbg-3d (z-index: 2) */
  mix-blend-mode: screen;
}

html.perf-mode-performance .zbg-pc-lighting {
  display: none !important;
}