/* ==========================================================================
   Phase 9 – Design-Feinschliff: Akzentfarbe, Fackelschein, Funken, Glut
   ========================================================================== */

/* Dezente, seitenweite Akzent-Waesche: reagiert auf --akzent (siehe
   formular.js setzeAkzent()), liegt unter dem Rausch-Overlay aus base.css. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, var(--akzent) 0%, transparent 65%);
  opacity: 0.05;
  transition: background var(--dur-slow) var(--ease-standard);
}

/* Elemente, die den Akzent aufgreifen */
.xp-bar__fill {
  background: linear-gradient(90deg, var(--akzent-dunkel) 0%, var(--akzent) 100%) !important;
}

.level-up__code {
  border-color: var(--akzent) !important;
  color: var(--akzent) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--akzent) 45%, transparent) !important;
}

/* ==========================================================================
   Welt-Hintergrund: feste (position: fixed) Berg-/Nebel-Szene hinter der
   gesamten Seite, nicht nur im Hero - reines SVG/CSS, keine Bilddateien.
   Liegt auf derselben Ebene wie die Rausch-Textur/Akzent-Waesche aus
   base.css (z-index: 0); alle Inhalts-Container haben z-index: 1 und
   bleiben darueber immer gut lesbar.
   ========================================================================== */
.welt-hintergrund {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.welt-hintergrund::before {
  /* Eigenes KI-Kampfbild (kein Blizzard-Material, keine Logos/Fraktions-
     Embleme drauf) als vollflaechiger, fester Hintergrund - an derselben
     Stelle wie zuvor die reine Berg-Silhouette. Dunkler Verlauf sorgt fuer
     Lesbarkeit von Header/Hero-Text; Horizont-Gluehen bleibt als zusaetzliche
     Ebene erhalten. */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to top, color-mix(in srgb, var(--akzent) 20%, transparent) 18vh, transparent 34vh),
    linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 60%, transparent) 0%, color-mix(in srgb, var(--c-bg) 48%, transparent) 35%, color-mix(in srgb, var(--c-bg) 65%, transparent) 70%, var(--c-bg) 100%),
    url("../img/hero-kampf.jpg");
  background-position: bottom, center, center 15%;
  background-size: 100% 100%, 100% 100%, cover;
  background-repeat: no-repeat;
  transition: background var(--dur-slow) var(--ease-standard);
  transform-origin: center;
}

/* Sehr langsamer, kaum wahrnehmbarer Zoom ("Ken Burns"), damit das
   Hintergrundbild lebendig statt wie ein Standfoto wirkt - reines CSS
   transform (GPU-Kompositing, kein Repaint), daher performant. */
@media (prefers-reduced-motion: no-preference) {
  .welt-hintergrund::before {
    animation: hero-atmen 50s ease-in-out infinite alternate;
  }
}

@keyframes hero-atmen {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@media (max-width: 640px) {
  .welt-hintergrund::before {
    background-image:
      linear-gradient(to top, color-mix(in srgb, var(--akzent) 20%, transparent) 18vh, transparent 34vh),
      linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 65%, transparent) 0%, color-mix(in srgb, var(--c-bg) 55%, transparent) 35%, color-mix(in srgb, var(--c-bg) 70%, transparent) 70%, var(--c-bg) 100%),
      url("../img/hero-kampf-mobil.jpg");
  }
}

/* Eigene Berg-Silhouette ausgeblendet, seit das Kampfbild eine eigene
   Kulisse (Burgen, Felsen) mitbringt - beides zusammen wirkte unruhig. */
.welt-hintergrund__berge {
  display: none;
}

.welt-hintergrund__berge--fern {
  height: 34vh;
  min-height: 190px;
  filter: blur(0.5px);
}

.welt-hintergrund__berge--fern path {
  fill: color-mix(in srgb, var(--c-bg-alt) 70%, black);
  opacity: 0.65;
}

.welt-hintergrund__berge--nah path {
  fill: var(--c-bg);
  opacity: 0.92;
}

.welt-hintergrund__nebel {
  position: absolute;
  bottom: 4vh;
  left: -25%;
  width: 150%;
  height: 22vh;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, color-mix(in srgb, var(--c-text-muted) 22%, transparent), transparent 70%);
  opacity: 0.3;
  filter: blur(8px);
}

.welt-hintergrund__nebel--2 {
  left: -45%;
  bottom: 1vh;
  opacity: 0.2;
}

@media (prefers-reduced-motion: no-preference) {
  .welt-hintergrund__nebel--1 {
    animation: nebel-drift 75s linear infinite;
  }
  .welt-hintergrund__nebel--2 {
    animation: nebel-drift 100s linear infinite reverse;
  }
}

@keyframes nebel-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(25%);
  }
}

.welt-hintergrund__mond {
  position: absolute;
  top: 6vh;
  right: 12%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8e0 0%, var(--c-border-gold-bright) 55%, transparent 80%);
  opacity: 0.3;
  box-shadow: 0 0 60px 20px color-mix(in srgb, var(--c-border-gold-bright) 18%, transparent);
}

.welt-hintergrund__sterne {
  position: absolute;
  inset: 0;
}

.welt-hintergrund__stern {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff8e0;
  opacity: 0.4;
}

@media (prefers-reduced-motion: no-preference) {
  .welt-hintergrund__stern {
    animation: stern-flackern 4s ease-in-out infinite;
  }
}

@keyframes stern-flackern {
  0%, 100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.85;
  }
}

/* ==========================================================================
   Eigenes Gilden-Wappen (Header) - reines SVG, kein Blizzard-Material.
   Flammen-Farbe folgt der Akzentfarbe (Fraktion/Hauptklasse).
   ========================================================================== */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.marken-wappen {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.marken-wappen__schild {
  fill: var(--c-bg-alt);
  stroke: var(--akzent);
  stroke-width: 1.5;
  transition: stroke var(--dur-slow) var(--ease-standard);
}

.marken-wappen__flamme {
  fill: var(--akzent);
  transition: fill var(--dur-slow) var(--ease-standard);
}

.marken-wappen__linie {
  stroke: var(--akzent);
  stroke-width: 1;
  opacity: 0.6;
  transition: stroke var(--dur-slow) var(--ease-standard);
}

/* ==========================================================================
   Fackelschein: sehr langsames, leises Glow-Flackern auf ausgewaehlten
   goldenen Rahmen - Kerzenlicht-Gefuehl statt Deko-Blinken.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .flackert {
    animation: fackelschein 5s ease-in-out infinite;
  }
}

@keyframes fackelschein {
  0%, 100% {
    box-shadow: var(--shadow-card), 0 0 10px color-mix(in srgb, var(--akzent) 30%, transparent);
  }
  50% {
    box-shadow: var(--shadow-card), 0 0 18px color-mix(in srgb, var(--akzent) 55%, transparent);
  }
}

/* ==========================================================================
   Glut-Funken: kleine, treibende Lichtpunkte im Hero - reines CSS, kein JS,
   kein Bild-Download. Symbolisiert "Glut" aus der Hero-Parallax-Idee.
   ========================================================================== */
.glut-funken {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.glut-funke {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-border-gold-bright);
  box-shadow: 0 0 6px 2px color-mix(in srgb, var(--c-border-gold-bright) 70%, transparent);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .glut-funke {
    animation: aufsteigen linear infinite;
  }
}

@keyframes aufsteigen {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-320px) translateX(var(--funke-drift, 20px));
    opacity: 0;
  }
}

/* ==========================================================================
   Auswahl-Funken: kurzer Partikel-Ausbruch bei Auswahl einer Options-Karte
   (siehe formular.js emitiereFunken()). Feedback, kein Deko-Selbstzweck.
   ========================================================================== */
.auswahl-funke {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--option-accent, var(--akzent));
  pointer-events: none;
  z-index: 60;
  animation: funke-ausbruch 600ms ease-out forwards;
}

@keyframes funke-ausbruch {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(0.2);
    opacity: 0;
  }
}