/* ============================================================
   NOXUS EPIC HERO LAYER — 2026-06-11
   Cinematic upgrades for Hero 1 (main) + Hero 2 (Castle Siege):
   real 3D boss models, ember canvas, runic circle, god rays,
   pointer-driven 3D tilt, title shimmer, entrance choreography.
   All decorations are injected by noxus-hero-epic.js — markup
   stays untouched and the page works fully without JS.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   SHARED INJECTED ELEMENTS
   ──────────────────────────────────────────────────────────── */

.nx-embers {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.nx-3d {
  position: absolute;
  pointer-events: none;
}

.nx-3d model-viewer {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  background: transparent;
  pointer-events: none;
}

/* Ghost boss behind the Hero 1 title — RETIRED 2026-06-11.
   Kill switch kept so any older deployed JS that still mounts
   the medusa model renders nothing. */
.nx-3d--ghost {
  display: none !important;
}

/* Siege guardian lurking in Hero 2 */
.nx-3d--siege {
  z-index: 3;
  right: 2vw;
  bottom: 6vh;
  width: clamp(300px, 30vw, 460px);
  height: clamp(300px, 30vw, 460px);
  opacity: 0;
  filter:
    drop-shadow(0 30px 44px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 30px rgba(150, 60, 255, 0.35));
  -webkit-mask-image: radial-gradient(ellipse 56% 54% at 50% 50%, #000 52%, transparent 86%);
  mask-image: radial-gradient(ellipse 56% 54% at 50% 50%, #000 52%, transparent 86%);
  transition: opacity 1.6s ease;
}

.nx-3d--siege.nx-3d-ready {
  opacity: 0.92;
}

/* ────────────────────────────────────────────────────────────
   HERO 1 — GOD RAYS
   ──────────────────────────────────────────────────────────── */

.nx-godrays {
  position: absolute;
  left: 50%;
  top: -120px;
  z-index: 3;
  width: 1100px;
  height: 760px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.5;
  background:
    conic-gradient(from 178deg at 50% -8%, transparent 0 41%, rgba(214, 156, 55, 0.10) 43% 45%, transparent 47% 49%, rgba(176, 78, 255, 0.12) 50.5% 52.5%, transparent 54% 56%, rgba(214, 156, 55, 0.09) 57.5% 59%, transparent 61%);
  -webkit-mask-image: linear-gradient(180deg, #000 18%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 18%, transparent 88%);
  mix-blend-mode: screen;
  animation: nxRaysSway 11s ease-in-out infinite alternate;
}

@keyframes nxRaysSway {
  from { transform: translateX(-50%) rotate(-1.4deg); opacity: 0.36; }
  to   { transform: translateX(-50%) rotate(1.4deg);  opacity: 0.58; }
}

/* ────────────────────────────────────────────────────────────
   HERO 1 — RUNIC MAGIC CIRCLE behind the title
   ──────────────────────────────────────────────────────────── */

/* RETIRED 2026-06-11 — kill switch kept so any older deployed JS
   that still injects the circle renders nothing. */
.nx-runecircle {
  display: none !important;
}

/* ────────────────────────────────────────────────────────────
   HERO 1 — SUMMON RING under the character
   ──────────────────────────────────────────────────────────── */

.nx-summonring {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: -1;
  width: 360px;
  height: 110px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 42% at 50% 50%, transparent 56%, rgba(246, 199, 96, 0.30) 60%, transparent 65%),
    radial-gradient(ellipse 50% 42% at 50% 50%, transparent 66%, rgba(176, 78, 255, 0.40) 71%, transparent 77%),
    radial-gradient(ellipse 38% 30% at 50% 50%, rgba(140, 60, 255, 0.30), transparent 70%);
  filter: blur(1px);
  animation: nxSummonPulse 4.2s ease-in-out infinite alternate;
}

@keyframes nxSummonPulse {
  from { opacity: 0.55; transform: translateX(-50%) scale(0.97); }
  to   { opacity: 1;    transform: translateX(-50%) scale(1.04); }
}

/* ────────────────────────────────────────────────────────────
   HERO 1 — TITLE SHIMMER + glow breathing
   (later stylesheet wins the cascade tie with newone-theme)
   ──────────────────────────────────────────────────────────── */

@media (min-width: 1181px) and (prefers-reduced-motion: no-preference) {
  .newone-hero h1 span {
    background: linear-gradient(110deg, #ffe7ad 0%, #e3a75f 26%, #fff7cf 42%, #ecc06a 58%, #9d63ff 88%, #ffe7ad 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: nxTitleShimmer 7s ease-in-out infinite;
  }

  .newone-hero h1 {
    animation: nxTitleBreathe 5.5s ease-in-out infinite alternate;
  }
}

@keyframes nxTitleShimmer {
  0%   { background-position: 120% 0; }
  44%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

@keyframes nxTitleBreathe {
  from { text-shadow: 0 0 28px rgba(182, 92, 255, 0.45), 0 0 56px rgba(126, 51, 255, 0.28); }
  to   { text-shadow: 0 0 40px rgba(182, 92, 255, 0.7), 0 0 90px rgba(126, 51, 255, 0.45); }
}

/* ────────────────────────────────────────────────────────────
   HERO 1 — POINTER 3D TILT
   JS writes --nxhx / --nxhy in [-1, 1] on the hero element.
   These overrides intentionally repeat the theme's locked
   transforms and extend them with the tilt variables.
   ──────────────────────────────────────────────────────────── */

@media (min-width: 1181px) and (prefers-reduced-motion: no-preference) {
  html body .wrapper header .newone-hero {
    perspective: 1100px;
  }

  html body .wrapper header .newone-podium {
    transform-style: preserve-3d;
  }

  html body .wrapper header .newone-podium-card--rank1 {
    transform:
      translateY(-20px)
      translate3d(calc(var(--nxhx, 0) * 12px), calc(var(--nxhy, 0) * 7px), 0)
      rotateY(calc(var(--nxhx, 0) * 4.5deg))
      rotateX(calc(var(--nxhy, 0) * -3.5deg)) !important;
  }

  html body .wrapper header .newone-podium-card--rank2,
  html body .wrapper header .newone-podium-card--rank3 {
    transform:
      translateY(-4px)
      translate3d(calc(var(--nxhx, 0) * 8px), calc(var(--nxhy, 0) * 5px), 0)
      rotateY(calc(var(--nxhx, 0) * 3.5deg))
      rotateX(calc(var(--nxhy, 0) * -2.5deg)) !important;
  }

  html body .wrapper header .newone-server-frame {
    transform: translate3d(calc(var(--nxhx, 0) * -14px), calc(var(--nxhy, 0) * -9px), 0) !important;
  }

  html body .wrapper header .newone-character {
    transform:
      translateY(-50%)
      translate3d(calc(var(--nxhx, 0) * -9px), calc(var(--nxhy, 0) * -6px), 0) !important;
  }

  .nx-3d--ghost {
    transform: translate3d(calc(var(--nxhx, 0) * -20px), calc(var(--nxhy, 0) * -12px), 0);
  }

  .nx-runecircle {
    margin-left: calc(-260px + var(--nxhx, 0) * -16px);
  }
}

/* ────────────────────────────────────────────────────────────
   HERO 1 — PODIUM HOVER: glare sweep + rank aura
   ──────────────────────────────────────────────────────────── */

.newone-podium-card {
  transition: filter 0.3s ease;
}

.newone-podium-card::after {
  content: "";
  position: absolute;
  inset: 6% 8%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 244, 214, 0.16) 48%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.7s ease;
}

.newone-podium-card:hover::after {
  transform: translateX(130%);
}

.newone-podium-card:hover {
  filter:
    drop-shadow(0 18px 30px rgba(0, 0, 0, 0.56))
    drop-shadow(0 0 26px rgba(196, 110, 255, 0.5))
    brightness(1.07);
}

.newone-podium-card--rank1::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12%;
  z-index: 0;
  width: 130%;
  height: 56%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 40%, rgba(255, 216, 74, 0.16), transparent 70%);
  animation: nxCrownAura 3.6s ease-in-out infinite alternate;
}

@keyframes nxCrownAura {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

/* ────────────────────────────────────────────────────────────
   HERO 1 — ENTRANCE CHOREOGRAPHY (opacity/blur only; the
   theme's !important transforms stay authoritative)
   ──────────────────────────────────────────────────────────── */

@media (min-width: 1181px) and (prefers-reduced-motion: no-preference) {
  .newone-season            { animation: nxHeroIn 0.9s cubic-bezier(0.2, 0.65, 0.25, 1) 0.10s both; }
  .newone-hero h1           { animation: nxHeroIn 1.0s cubic-bezier(0.2, 0.65, 0.25, 1) 0.28s both, nxTitleBreathe 5.5s ease-in-out 1.3s infinite alternate; }
  .newone-tagline           { animation: nxHeroIn 0.9s cubic-bezier(0.2, 0.65, 0.25, 1) 0.50s both; }
  .newone-podium            { animation: nxHeroIn 1.1s cubic-bezier(0.2, 0.65, 0.25, 1) 0.68s both; }
  .newone-server-frame      { animation: nxHeroIn 1.1s cubic-bezier(0.2, 0.65, 0.25, 1) 0.55s both; }
  .newone-character         { animation: nxHeroIn 1.2s cubic-bezier(0.2, 0.65, 0.25, 1) 0.40s both; }
  .newone-live-panels       { animation: nxHeroIn 1.0s cubic-bezier(0.2, 0.65, 0.25, 1) 0.85s both; }
}

@keyframes nxHeroIn {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0); }
}

/* ────────────────────────────────────────────────────────────
   HERO 2 — CASTLE SIEGE cinematics
   ──────────────────────────────────────────────────────────── */

/* Scroll parallax target — JS writes --nxcy in px on the section */
.wonderCastleHero-bg {
  transform: translate3d(0, var(--nxcy, 0px), 0) scale(1.08);
  will-change: transform;
}

/* Cinematic top/bottom letterbox fog */
.nx-siege-fog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2%;
  z-index: 2;
  height: 34%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 56% 42% at 30% 88%, rgba(140, 55, 245, 0.18), transparent 72%),
    radial-gradient(ellipse 50% 38% at 72% 92%, rgba(96, 28, 200, 0.16), transparent 74%),
    linear-gradient(180deg, transparent, rgba(3, 0, 8, 0.85) 86%);
  filter: blur(6px);
  animation: nxSiegeFogDrift 16s ease-in-out infinite alternate;
}

@keyframes nxSiegeFogDrift {
  from { transform: translate3d(-1.5%, 0, 0); }
  to   { transform: translate3d(1.5%, -2%, 0); }
}

/* Gold corner trims framing the whole siege scene */
.nx-siege-frame {
  position: absolute;
  inset: 18px;
  z-index: 5;
  pointer-events: none;
}

.nx-siege-frame::before,
.nx-siege-frame::after {
  content: "";
  position: absolute;
  width: 56px;
  height: 56px;
  opacity: 0.85;
  filter: drop-shadow(0 0 8px rgba(246, 215, 120, 0.35));
}

.nx-siege-frame::before {
  top: 0;
  left: 0;
  border-top: 1px solid rgba(246, 215, 120, 0.7);
  border-left: 1px solid rgba(246, 215, 120, 0.7);
}

.nx-siege-frame::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid rgba(246, 215, 120, 0.7);
  border-right: 1px solid rgba(246, 215, 120, 0.7);
}

/* Countdown digits: living gold glow */
@media (prefers-reduced-motion: no-preference) {
  .wonderCastleHero-countdown strong {
    animation: nxCountGlow 2.4s ease-in-out infinite alternate;
  }

  .wonderCastleHero-countdown div:nth-child(2) strong { animation-delay: 0.3s; }
  .wonderCastleHero-countdown div:nth-child(3) strong { animation-delay: 0.6s; }
  .wonderCastleHero-countdown div:nth-child(4) strong { animation-delay: 0.9s; }
}

@keyframes nxCountGlow {
  from {
    text-shadow:
      0 0 10px rgba(255, 222, 153, 0.34),
      0 0 18px rgba(151, 78, 255, 0.42),
      0 2px 0 rgba(0, 0, 0, 0.96);
  }
  to {
    text-shadow:
      0 0 16px rgba(255, 230, 168, 0.75),
      0 0 30px rgba(170, 95, 255, 0.7),
      0 2px 0 rgba(0, 0, 0, 0.96);
  }
}

/* ────────────────────────────────────────────────────────────
   SAFETY — small screens + reduced motion
   ──────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .nx-godrays,
  .nx-runecircle,
  .nx-3d--ghost,
  .nx-summonring {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .nx-embers,
  .nx-3d--siege {
    display: none !important;
  }

  .nx-siege-fog {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-godrays,
  .nx-runecircle .nx-ring-outer,
  .nx-runecircle .nx-ring-inner,
  .nx-runecircle .nx-ring-glyphs,
  .nx-summonring,
  .newone-podium-card--rank1::before,
  .nx-siege-fog,
  .wonderCastleHero-countdown strong {
    animation: none !important;
  }

  .newone-podium-card::after {
    display: none;
  }

  .wonderCastleHero-bg {
    transform: none;
  }
}

/* Hero character polish: shift left, soften cropped video wings, keep title on one line. */
html body .wrapper header .newone-hero h1 {
  white-space: nowrap !important;
}

html body .wrapper header .newone-hero h1 span {
  display: inline-block;
}

@media (min-width: 1181px) {
  html body .wrapper header .newone-character {
    left: -150px !important;
    top: 330px !important;
    width: 560px !important;
    overflow: visible !important;
  }

  html body .wrapper header .newone-character::before,
  html body .wrapper header .newone-character::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  html body .wrapper header .newone-character::before {
    inset: 6% -16% 5% -8%;
    z-index: -2;
    border-radius: 48%;
    background:
      radial-gradient(ellipse 34% 48% at 16% 48%, rgba(182, 92, 255, 0.28), transparent 72%),
      radial-gradient(ellipse 34% 48% at 84% 48%, rgba(182, 92, 255, 0.24), transparent 72%),
      radial-gradient(ellipse 54% 58% at 52% 58%, rgba(246, 215, 120, 0.10), transparent 74%);
    filter: blur(22px);
    opacity: 0.9;
  }

  html body .wrapper header .newone-character::after {
    inset: 2% -7% 3% -5%;
    z-index: 2;
    background:
      linear-gradient(90deg, rgba(9, 4, 18, 0.72), transparent 12%, transparent 86%, rgba(9, 4, 18, 0.68)),
      radial-gradient(ellipse 22% 40% at 4% 47%, rgba(178, 68, 255, 0.22), transparent 72%),
      radial-gradient(ellipse 22% 40% at 96% 47%, rgba(178, 68, 255, 0.18), transparent 72%);
    filter: blur(10px);
    mix-blend-mode: screen;
    opacity: 0.72;
  }

  html body .wrapper header .newone-character img,
  html body .wrapper header .newone-character video {
    width: 492px !important;
    /* fade every cropped edge of the video frame (top included,
       the wing tips get cut there); bottom stays solid for the feet */
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 8%, #000 90%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 10%, #000 100%) !important;
    -webkit-mask-composite: source-in !important;
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 8%, #000 90%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 10%, #000 100%) !important;
    mask-composite: intersect !important;
    filter:
      drop-shadow(0 28px 55px rgba(0, 0, 0, 0.68))
      drop-shadow(0 0 34px rgba(157, 61, 255, 0.32)) !important;
  }
}