/* ==========================================================================
   TournamentMU — Performance Override v2.1
   Loaded LAST. Kills ALL CSS animations site-wide with a universal
   selector, then re-enables ONLY the lightweight scroll-reveal
   transitions. Also adds video background, containment, and
   resource-loading optimizations.
   ========================================================================== */

/* ==========================================================================
   1. UNIVERSAL ANIMATION KILL
   Kill every animation on every element. No exceptions.
   This is the single most impactful performance fix — removes 89+
   infinite CSS animations that were running simultaneously.
   ========================================================================== */

*,
*::before,
*::after {
  animation: none !important;
  animation-delay: 0s !important;
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  /* Kill ALL backdrop-filters site-wide — 50+ instances across nexus.css
     and lwe.css. Each one forces a separate GPU compositing layer that
     must re-render everything behind it every single frame during scroll.
     This is the #1 cause of scroll jank. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   2. HIDE HEAVY DECORATIVE ELEMENTS
   These DOM elements were driving particle/orb/rune/pillar effects
   ========================================================================== */

.tmu-hero__particles,
.tmu-hero__orb,
.tmu-hero__orb--1,
.tmu-hero__orb--2,
.tmu-hero__orb--3,
.tmu-hero__orb--4,
.tmu-hero__orb--5,
.tmu-hero__orb--6,
.tmu-hero__sweep,
.tmu-hero__rune,
.tmu-hero__rune-ring,
.tmu-hero__rune-ring--outer,
.tmu-hero__rune-ring--mid,
.tmu-hero__rune-ring--inner,
.tmu-hero__pillar,
.tmu-hero__pillar--1,
.tmu-hero__pillar--2,
.tmu-hero__pillar--3,
.tmu-hero__scroll-hint,
.tmu-hero__scroll-arrow,
.tmu-announce__glow,
.tmu-warzone,
.tmu-wz-flash,
.tmu-wz-fireline,
.tmu-vibe-embers {
  display: none !important;
}

/* ==========================================================================
   3. REDUCE GPU-HEAVY EFFECTS
   ========================================================================== */

/* backdrop-filter is now universally killed in §1 above.
   No per-element overrides needed. */

/* Remove excessive box-shadows on decorative elements */
.tmu-hero__orb,
.tmu-hero__sweep,
.lwe-step__num::before,
.tmu-forge-cell__dot::after {
  box-shadow: none !important;
}

/* ── Fix "transition: all" problem ──
   60+ elements use "transition: all" which causes the browser to monitor
   and interpolate every CSS property on state changes. This is especially
   painful on the fixed navbar that toggles .is-scrolled on every scroll.
   Restrict transitions to only visual properties (cheap GPU operations). */

.cmd-bar,
.cmd-bar::before {
  transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.cmd-bar__nav {
  transition: none !important;
}

.cmd-bar__link,
.cmd-bar__cta,
.cmd-bar__play,
.cmd-bar__avatar,
.cmd-bar__lang-btn {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease !important;
}

/* Cards, panels, and interactive elements: only transition what matters */
.lwe-why-card,
.lwe-class-card,
.lwe-event-card,
.lwe-rank-panel,
.mu-btn,
.tmu-forge-cell {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* Reset will-change on everything (reserves GPU layers unnecessarily) */
*  {
  will-change: auto !important;
}

/* body.nova::before — gradient mesh is kept visible.
   Universal rules in §1 already kill its animation + backdrop-filter. */

/* Mouse-follow spotlight — useless since JS mousemove is disabled */
body.nova::after {
  display: none !important;
}

/* Remove all other decorative pseudo-elements */
body.nova .wrapper::before,
body.nova .wrapper::after,
.content::before,
.content::after,
main.content::before,
main.content::after {
  display: none !important;
}

/* ==========================================================================
   4. FULL-BODY VIDEO BACKGROUND STYLES
   The video sits position:fixed covering the viewport at z-index:0,
   same layer as body::before (which we hide). The .wrapper already
   has z-index:1 so all content renders above the video naturally.

   IMPORTANT: z-index:-1 does NOT work for position:fixed children of
   <body> — the element paints behind the root <html> background.
   Instead we use z-index:0 and hide the opaque body::before overlay.
   ========================================================================== */

/* ── Video container: fixed fullscreen ── */
.tmu-video-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  /* Ensure it doesn't create scroll */
  width: 100vw !important;
  height: 100vh !important;
}

.tmu-video-bg__video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  width: auto !important;
  height: auto !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
}

/* Dark overlay for text readability across the entire page */
.tmu-video-bg__overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(4, 6, 12, 0.45) 0%,
    rgba(4, 6, 12, 0.30) 15%,
    rgba(4, 6, 12, 0.35) 50%,
    rgba(4, 6, 12, 0.45) 80%,
    rgba(4, 6, 12, 0.65) 100%
  ) !important;
}

/* ==========================================================================
   4b. TRANSPARENT BACKGROUNDS WHEN VIDEO IS ACTIVE
   body.has-video-bg is added by PHP when a video URL is configured.
   We must kill EVERY opaque layer between the viewer and the video:
     html background, body background, body::before (opaque gradient
     mesh from nexus.css/lwe.css), body::after (spotlight), and any
     background on .wrapper, main.content, sections, footer.
   ========================================================================== */

/* html root — prevent body bg propagation to root element */
html.has-video-bg {
  background: #030406 !important; /* dark fallback behind video edges */
  background-image: none !important;
}

/* Body — kill the background image + gradient from nova.css & lwe.css */
body.nova.has-video-bg {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* body::before — THIS IS THE MAIN BLOCKER
   nexus.css sets position:fixed; z-index:0 with an OPAQUE gradient mesh.
   lwe.css overrides it with another opaque gradient + !important.
   If we don't kill this, it paints a solid dark layer over the video. */
body.nova.has-video-bg::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* body::after — mouse spotlight (already killed in §3, reinforce) */
body.nova.has-video-bg::after {
  content: none !important;
  display: none !important;
}

/* Wrapper — must be transparent, keep z-index:1 so content is above video */
body.has-video-bg .wrapper {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  position: relative;
  z-index: 1;
}

/* Wrapper pseudo-elements — kill any decorative overlays */
body.has-video-bg .wrapper::before,
body.has-video-bg .wrapper::after {
  display: none !important;
}

/* Hero section — transparent */
body.has-video-bg .tmu-hero,
body.has-video-bg .tmu-hero.tmu-hero--lwe {
  background: transparent !important;
  background-color: transparent !important;
}

/* Hero bottom gradient fade — hide so video shows cleanly */
body.has-video-bg .tmu-hero::after {
  display: none !important;
}

/* Hide the static veil fallback when video is present */
body.has-video-bg .tmu-hero__veil {
  display: none !important;
}

/* Main content area — transparent */
body.has-video-bg main.content,
body.has-video-bg .content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body.has-video-bg main.content::before,
body.has-video-bg main.content::after {
  display: none !important;
}

/* All homepage sections — transparent */
body.has-video-bg .lwe-section {
  background: transparent !important;
  background-color: transparent !important;
}

/* Navbar — keep semi-transparent dark for readability */
body.has-video-bg .cmd-bar {
  background: rgba(4, 6, 12, 0.85) !important;
}

/* Footer — semi-transparent dark for readability */
body.has-video-bg .lwe-footer {
  background: rgba(4, 6, 12, 0.75) !important;
}

/* ── Ensure all content layers sit above the video ── */
.tmu-hero__grid,
.tmu-hero__content,
.tmu-hero__actions,
.tmu-countdown--hero,
.tmu-forge-panel,
.tmu-announce[data-hero-ticker] {
  position: relative;
  z-index: 2;
}

/* Static veil fallback (only shown when no video URL is set) */
.tmu-hero--lwe > .tmu-hero__veil {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(255, 120, 50, 0.06), transparent 55%),
    radial-gradient(ellipse 80% 65% at 50% 55%, rgba(255, 60, 20, 0.03), transparent 60%) !important;
  opacity: 0.8 !important;
}

/* ==========================================================================
   5. LAYOUT CONTAINMENT FOR SMOOTHER SCROLLING
   Tells the browser each container's layout is independent, so
   changes inside one box don't force the entire page to re-layout.
   ========================================================================== */

.wrapper,
main.content,
.lwe-footer {
  contain: layout style;
}

.cmd-bar {
  contain: layout style;
}

/* Modals are off-screen until opened — full containment */
.modal_window,
.tmu-discord-modal,
.tmu-auth-modal,
.tmu-account-modal,
#select_server {
  contain: layout style paint;
}

/* Sections that are heavy but self-contained */
.tmu-forge-panel,
.tmu-hero--lwe,
.tmu-announce,
.lwe-section,
.tmu-float-stack {
  contain: layout style;
}

/* Offscreen mobile drawer */
.cmd-drawer {
  contain: layout style paint;
}

/* ==========================================================================
   6. MOBILE OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 768px) {
  .tmu-video-bg__video {
    filter: brightness(0.85);
  }

  .tmu-video-bg__overlay {
    background: linear-gradient(
      180deg,
      rgba(4, 6, 12, 0.65) 0%,
      rgba(4, 6, 12, 0.50) 15%,
      rgba(4, 6, 12, 0.55) 50%,
      rgba(4, 6, 12, 0.65) 80%,
      rgba(4, 6, 12, 0.85) 100%
    ) !important;
  }
}

/* ==========================================================================
   7. SMOOTH SCROLL-REVEAL (the ONLY animations we keep)
   These are one-shot CSS transitions (not keyframe animations)
   triggered by IntersectionObserver adding .tmu-visible class.
   ========================================================================== */

.tmu-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease !important;
}

.tmu-anim.tmu-visible {
  opacity: 1;
  transform: translateY(0);
}

.lwe-section {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease, transform 0.5s ease !important;
}

.lwe-section.tmu-visible {
  opacity: 1;
  transform: translateY(0);
}

.lwe-footer__grid {
  opacity: 0;
  transition: opacity 0.5s ease !important;
}

.lwe-footer__grid.tmu-visible {
  opacity: 1;
}

/* Stagger delays for grid children */
.tmu-anim[data-delay="100"] { transition-delay: 0.1s; }
.tmu-anim[data-delay="200"] { transition-delay: 0.2s; }
.tmu-anim[data-delay="300"] { transition-delay: 0.3s; }
.tmu-anim[data-delay="400"] { transition-delay: 0.4s; }
.tmu-anim[data-delay="500"] { transition-delay: 0.5s; }
.tmu-anim[data-delay="600"] { transition-delay: 0.6s; }
.tmu-anim[data-delay="700"] { transition-delay: 0.7s; }
.tmu-anim[data-delay="800"] { transition-delay: 0.8s; }

/* ==========================================================================
   8. PREFERS-REDUCED-MOTION — Respect OS accessibility settings
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tmu-video-bg__video {
    display: none;
  }

  .tmu-anim,
  .lwe-section,
  .lwe-footer__grid {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}