/* LEGION RUST — атмосфера рейда: искры, пламя, вспышки */

/* —— Фон-картина на весь сайт (фиксированный слой под контентом) —— */
body::before {
  content: "";
  position: fixed;
  inset: -40px;
  z-index: 0;
  pointer-events: none;
  background-image: var(--site-bg, url("../assets/photos/site-atmosphere.jpg"));
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  filter: blur(var(--site-bg-blur, 18px)) saturate(1.18) brightness(0.52) contrast(1.06);
  opacity: var(--site-bg-opacity, 0.32);
  transform: scale(1.06);
}

body[data-page="servers"]::before {
  opacity: var(--site-bg-opacity-home, 0.4);
  background-position: center 40%;
}

html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 32%, rgba(10, 10, 10, 0.08) 0%, rgba(10, 10, 10, 0.55) 72%),
    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.28) 0%,
      rgba(10, 10, 10, 0.42) 50%,
      rgba(10, 10, 10, 0.68) 100%
    );
}

body > main,
body > #site-footer,
body > .footer {
  position: relative;
  z-index: 1;
}

/* —— Слой по всему сайту —— */
.legion-ambient {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  overflow: hidden;
}

.legion-ember-field {
  position: absolute;
  inset: 0;
}

.legion-fire-floor {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(28vh, 220px);
  z-index: 44;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(255, 40, 8, 0.22) 0%, rgba(255, 3, 8, 0.08) 35%, transparent 100%),
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255, 120, 40, 0.15) 0%, transparent 70%);
  opacity: 0.85;
  transition: opacity 0.4s;
}

.legion-fire-floor.is-burst {
  opacity: 1;
  animation: legionFloorBurst 1.1s ease-out;
}

@keyframes legionFloorBurst {
  0% {
    filter: brightness(1);
    transform: scaleY(0.6);
  }

  25% {
    filter: brightness(2.2);
    transform: scaleY(1.15);
  }

  100% {
    filter: brightness(1);
    transform: scaleY(1);
  }
}

/* Искры снизу вверх (как от костра / C4) */
.legion-ember {
  position: absolute;
  bottom: -12px;
  left: var(--x, 50%);
  width: var(--w, 3px);
  height: var(--h, 10px);
  border-radius: 999px;
  background: linear-gradient(to top, rgba(255, 3, 8, 0.2) 0%, #ff6a00 45%, #ffd080 100%);
  box-shadow:
    0 0 6px rgba(255, 90, 20, 0.9),
    0 0 14px rgba(255, 3, 8, 0.45);
  opacity: 0;
  animation: legionEmberRise var(--dur, 5s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes legionEmberRise {
  0% {
    transform: translateY(0) translateX(0) scale(0.5) rotate(0deg);
    opacity: 0;
  }

  8% {
    opacity: var(--peak, 0.85);
  }

  100% {
    transform: translateY(calc(-100vh - 40px)) translateX(var(--drift, 0px)) scale(0.15)
      rotate(var(--spin, 180deg));
    opacity: 0;
  }
}

/* «Дождь» пламени — капли сверху вниз */
.legion-fire-drop {
  position: absolute;
  top: -20px;
  left: var(--x, 50%);
  width: var(--w, 4px);
  height: var(--len, 14px);
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(to bottom, #fff2a8 0%, #ff6a00 35%, #ff0308 70%, transparent 100%);
  box-shadow: 0 0 10px rgba(255, 80, 20, 0.75);
  opacity: 0;
  animation: legionFireFall var(--dur, 3.5s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes legionFireFall {
  0% {
    transform: translateY(0) translateX(0) scaleY(0.6);
    opacity: 0;
  }

  5% {
    opacity: var(--peak, 0.7);
  }

  100% {
    transform: translateY(105vh) translateX(var(--drift, 0px)) scaleY(1.1);
    opacity: 0;
  }
}

/* —— Hero: огонь у пола —— */
.hero-raid-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 90% at 65% 100%, rgba(255, 80, 30, 0.35) 0%, transparent 62%),
    linear-gradient(to top, rgba(255, 3, 8, 0.2) 0%, transparent 50%);
  animation: heroGlowPulse 4s ease-in-out infinite;
}

@keyframes heroGlowPulse {
  0%,
  100% {
    opacity: 0.75;
  }

  50% {
    opacity: 1;
  }
}

.hero-ember-bed {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.hero-ember-bed .legion-ember {
  --peak: 0.95;
}

/* —— Support —— */
.support-section::before {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 45%;
  background: radial-gradient(ellipse 75% 70% at 25% 100%, rgba(255, 60, 20, 0.08) 0%, transparent 72%);
  z-index: 0;
}

.support-grid {
  position: relative;
  z-index: 1;
}

/* —— Рейд в шапке: всплеск под меню (не на весь экран) —— */
.raid-bottom-blast {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100vw, 720px);
  height: 120px;
  margin-left: min(-50vw, -360px);
  transform: translateX(-50%) scaleY(0.25);
  opacity: 0;
  background:
    radial-gradient(ellipse 70% 90% at 50% 100%, rgba(255, 200, 100, 0.75) 0%, rgba(255, 80, 20, 0.35) 40%, transparent 72%);
  filter: blur(3px);
  z-index: 1;
  pointer-events: none;
}

.raid-firefall {
  position: fixed;
  top: var(--header-h, 80px);
  left: var(--x, 50%);
  width: var(--w, 4px);
  height: 16px;
  margin-left: calc(var(--w, 4px) / -2);
  border-radius: 999px;
  background: linear-gradient(to bottom, #ffe9a8, #ff4500, #ff0308);
  box-shadow: 0 0 8px rgba(255, 100, 30, 0.9);
  opacity: 0;
  z-index: 96;
  pointer-events: none;
  mix-blend-mode: screen;
}

.header.is-raid-reveal .raid-bottom-blast {
  animation: raidBottomBlast 1s ease-out both;
}

.header.is-raid-reveal .raid-firefall {
  animation: raidFirefallDrop 0.95s cubic-bezier(0.4, 0, 0.85, 0.6) both;
  animation-delay: var(--raid-delay, 0s);
}

@keyframes raidBottomBlast {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.2);
  }

  20% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scaleY(1.2);
  }
}

@keyframes raidFirefallDrop {
  0% {
    opacity: 0;
    transform: translateY(0) scaleY(0.4);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(var(--fall-dist, 50vh)) scaleY(1.2);
  }
}

/* Marquee — лёгкое свечение */
.marquee {
  position: relative;
}

.marquee::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 3, 8, 0.06) 50%,
    transparent 100%
  );
  pointer-events: none;
  animation: marqueeGlow 6s ease-in-out infinite;
}

@keyframes marqueeGlow {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  html::after {
    display: none !important;
  }

  .legion-ambient,
  .legion-fire-floor,
  .hero-raid-glow,
  .hero-ember-bed {
    display: none !important;
  }

  .raid-bottom-blast,
  .raid-firefall,
  .marquee::before,
  .support-section::before {
    animation: none !important;
    display: none !important;
  }
}

@media (max-width: 767px) {
  .legion-fire-drop {
    display: none;
  }

  .legion-ambient .legion-ember:nth-child(n + 16) {
    display: none;
  }
}