/* ============================================================
   gta6karte.de — Hero-Atmosphäre (nur Startseite, #countdown)
   ------------------------------------------------------------
   Selbst gebaut: reines CSS + eine selbst gezeichnete SVG-Skyline.
   KEINE fremden Bilder, keine offiziellen/geleakten Assets.
   Reagiert auf das Theme-System (html[data-theme]).
   Animation ausschliesslich via opacity / transform /
   background-position. prefers-reduced-motion wird respektiert.
   Wirkt nur auf den bestehenden Countdown-Hero – kein Umbau.
   ============================================================ */

/* Theme-Stellschrauben – Default = Dark (bewusst ruhig, wenig Glow). */
.cd-hero{
  --atmo-g1:rgba(255,62,136,.11);    /* Glow oben-links  */
  --atmo-g2:rgba(31,182,166,.09);    /* Glow oben-rechts */
  --atmo-g3:rgba(255,138,61,.08);    /* Glow Horizont    */
  --atmo-fog:rgba(0,0,0,0);          /* nur Grassrivers  */
  --atmo-grid:rgba(130,160,185,.11);
  --atmo-horizon:rgba(180,205,225,.14);
  --atmo-scan:rgba(255,255,255,.024);
  --atmo-intensity:.8;
  --atmo-sky-h:56px;                 /* Skyline-Höhe      */
}

/* Hintergrund-Ebene im Hero. Absolut -> keine Layout-Verschiebung. */
.hero-atmo{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  border-radius:inherit;
  background:
    repeating-linear-gradient(0deg,var(--atmo-scan) 0 1px,transparent 1px 3px),
    url("/assets/hero-skyline.svg") bottom center/auto var(--atmo-sky-h) repeat-x,
    linear-gradient(180deg,rgba(255,255,255,.02),transparent 32%,rgba(0,0,0,.14));
}

/* Hero-Inhalt über die Atmosphäre heben (alle Kinder ausser der Atmo-Ebene). */
.cd-hero>:not(.hero-atmo){position:relative;z-index:1}

/* Glow-Flächen + optionaler Nebel (sanfte Bewegung). */
.hero-atmo::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  opacity:var(--atmo-intensity);
  background:
    radial-gradient(58% 78% at 12% 6%,var(--atmo-g1),transparent 60%),
    radial-gradient(66% 88% at 90% 16%,var(--atmo-g2),transparent 62%),
    radial-gradient(95% 70% at 50% 112%,var(--atmo-g3),transparent 60%),
    radial-gradient(120% 95% at 50% 122%,var(--atmo-fog),transparent 72%);
  animation:atmo-glow 9s ease-in-out infinite;
  will-change:opacity,transform;
}

/* Horizontlinie + Perspektiv-Grid (nach unten maskiert, scrollt sanft). */
.hero-atmo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:
    linear-gradient(0deg,var(--atmo-horizon),transparent 3px),
    repeating-linear-gradient(0deg,var(--atmo-grid) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,var(--atmo-grid) 0 1px,transparent 1px 40px);
  background-size:100% 100%,100% 34px,40px 100%;
  background-position:0 62%,0 0,0 0;
  background-repeat:no-repeat,repeat,repeat;
  -webkit-mask:linear-gradient(180deg,transparent 50%,#000 76%);
          mask:linear-gradient(180deg,transparent 50%,#000 76%);
  animation:atmo-grid 7s linear infinite;
  will-change:background-position;
}

@keyframes atmo-glow{
  0%,100%{opacity:var(--atmo-intensity);transform:translate3d(0,0,0) scale(1)}
  50%{opacity:calc(var(--atmo-intensity) * .8);transform:translate3d(0,-1.4%,0) scale(1.03)}
}
/* nur die scrollende Grid-Ebene bewegt sich (Horizont + Vertikalen bleiben). */
@keyframes atmo-grid{
  from{background-position:0 62%,0 0,0 0}
  to{background-position:0 62%,0 34px,0 0}
}

/* ---------- Theme-Varianten ---------- */

/* Vice City — Erlebnis-Modus: deutlich staerkeres Neon (Pink/Cyan/Orange) */
html[data-theme="vice-city"] .cd-hero{
  --atmo-g1:rgba(255,62,136,.42);
  --atmo-g2:rgba(34,211,238,.32);
  --atmo-g3:rgba(255,138,61,.28);
  --atmo-grid:rgba(255,84,170,.28);
  --atmo-horizon:rgba(255,120,200,.46);
  --atmo-scan:rgba(255,255,255,.055);
  --atmo-intensity:1;
}
/* zusaetzliche Sunset-Aura am unteren Hero-Rand (nur Vice City) */
html[data-theme="vice-city"] .cd-hero{
  box-shadow:0 0 60px -24px rgba(255,62,136,.5) inset;
}
/* Grassrivers — grünlicher Sumpf-/Nebel-Vibe, wenig Grid */
html[data-theme="grassrivers"] .cd-hero{
  --atmo-g1:rgba(63,207,142,.20);
  --atmo-g2:rgba(143,203,83,.14);
  --atmo-g3:rgba(232,184,75,.12);
  --atmo-fog:rgba(78,150,92,.18);
  --atmo-grid:rgba(120,180,120,.09);
  --atmo-horizon:rgba(180,220,150,.15);
  --atmo-scan:rgba(255,255,255,.02);
  --atmo-intensity:.92;
}
/* Police Scanner — blauer Radar-/Grid-Vibe, kräftiges Grid */
html[data-theme="police"] .cd-hero{
  --atmo-g1:rgba(58,160,255,.22);
  --atmo-g2:rgba(58,160,255,.13);
  --atmo-g3:rgba(255,176,32,.10);
  --atmo-grid:rgba(72,152,240,.26);
  --atmo-horizon:rgba(120,190,255,.36);
  --atmo-scan:rgba(120,180,255,.05);
  --atmo-intensity:1;
}

/* ---------- Mobile: dezenter + Skyline kleiner ----------
   html[data-theme] .cd-hero matcht die Theme-Spezifitaet (0-2-1) und
   steht spaeter im Stylesheet -> gewinnt gegen die Theme-Bloecke,
   dampft also auch Vice City / Police auf Mobile. */
@media(max-width:560px){
  .cd-hero{--atmo-intensity:.72;--atmo-sky-h:40px}
  html[data-theme] .cd-hero{--atmo-intensity:.72}
  .hero-atmo::after{opacity:.72}
}

/* ---------- Reduced Motion: alles statisch ---------- */
@media(prefers-reduced-motion:reduce){
  .hero-atmo::before,.hero-atmo::after{animation:none}
}