/* =============================================================
   galaxy-background.css — 3-Layer Cosmic Backdrop
   =============================================================
   WHY: Owner-Wunsch nach Galaxy-Look. 4 GPU-Layer:
     1. Nebula — driftende Color-Washes (background-position drift)
     2. Star-Far  — 70 Sterne, langsame Rotation (240s)
     3. Star-Mid  — 40 Sterne, gegenlaeufig rotieren (120s)
     4. Star-Near — 22 helle Sterne, schnelle Rotation (60s) + Pulse

   Performance:
   - Box-shadow-Multi-Point-Trick: 1 Element pro Layer rendert ALLE Sterne
   - Nur transform / opacity / background-position animiert (GPU-only)
   - prefers-reduced-motion: alle Animationen aus
   - Mobile (<600px): Far-Layer-Opacity reduziert

   Notbremse: Stylesheet-Link aus index.html entfernen,
   `<div id="tm-galaxy">` HTML kann bleiben (rendert dann nichts).
   ============================================================= */

#tm-galaxy {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* Default: aus, bis Feature-Flag aktiv */
  display: none;
}

body.galaxy-on #tm-galaxy { display: block; }

/* Wenn Galaxy aktiv ist: alter Footballs-Floater bleibt aus,
   Comets bleiben aktiv (passen ins Galaxy-Konzept als Sternschnuppen). */
body.galaxy-on #tm-footballs { display: none !important; }

/* ─────────────────────────────────────────────────────────────────
   1. Nebula — sanft driftende Multi-Color Color-Washes
   ───────────────────────────────────────────────────────────────── */
.tm-galaxy__nebula {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(ellipse 55% 40% at 18% 28%, rgba(64, 196, 255, .12), transparent 65%),
    radial-gradient(ellipse 45% 35% at 78% 72%, rgba(255, 71, 156, .10), transparent 65%),
    radial-gradient(ellipse 40% 50% at 50% 50%, rgba(0, 230, 118, .08), transparent 65%),
    radial-gradient(ellipse 50% 35% at 88% 18%, rgba(179, 136, 255, .10), transparent 65%),
    radial-gradient(ellipse 50% 35% at 12% 82%, rgba(255, 215, 64, .06), transparent 65%);
  filter: blur(8px) saturate(1.1);
  animation: nebulaDrift 90s ease-in-out infinite alternate;
}

@keyframes nebulaDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(1.5%, -1%, 0) scale(1.04); }
  100% { transform: translate3d(-1%, 1.5%, 0) scale(1.06); }
}

/* ─────────────────────────────────────────────────────────────────
   2-4. Star-Layers — Box-Shadow-Multi-Point-Trick
   Jeder Layer ist EIN 1px-Element, das via box-shadow N Sterne rendert.
   Rotation drueckt das ganze Layer um seinen Origin (Center).
   ───────────────────────────────────────────────────────────────── */
.tm-galaxy__stars-far,
.tm-galaxy__stars-mid,
.tm-galaxy__stars-near {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
}

.tm-galaxy__stars-far {
  opacity: .55;
  animation: starsRotateCW 240s linear infinite;
}

.tm-galaxy__stars-mid {
  opacity: .75;
  animation: starsRotateCCW 120s linear infinite;
}

.tm-galaxy__stars-near {
  opacity: .9;
  animation:
    starsRotateCW 60s linear infinite,
    starsTwinkle 3.6s ease-in-out infinite;
}

/* Rotation muss den translate(-50%,-50%) Center-Trick beibehalten,
   sonst springt das Layer beim Animations-Start. */
@keyframes starsRotateCW {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes starsRotateCCW {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Subtiles Twinkle nur auf Near-Layer — opacity flackert leicht.
   WHY only near: pro-star-twinkle waere zu teuer; Layer-twinkle reicht visuell. */
@keyframes starsTwinkle {
  0%, 100% { opacity: .9;  filter: brightness(1); }
  50%      { opacity: .6;  filter: brightness(1.15); }
}

/* ─────────────────────────────────────────────────────────────────
   STAR DATA — algorithmisch generiert (Python, seed-fixed)
   ───────────────────────────────────────────────────────────────── */

/* FAR (70 Sterne) */
.tm-galaxy__stars-far { box-shadow:
  912px 144px 0 0px rgba(255,255,255,.4),
  -31px -373px 0 0px rgba(200,220,255,.45),
  101px 67px 0 0px rgba(255,255,255,.55),
  -173px -802px 0 0.3px rgba(255,255,255,.4),
  -118px 662px 0 0px rgba(255,255,255,.4),
  -537px 844px 0 0px rgba(255,255,255,.4),
  -695px 1149px 0 0px rgba(200,220,255,.45),
  119px -169px 0 0px rgba(255,255,255,.55),
  -1016px -235px 0 0.3px rgba(255,255,255,.55),
  386px -710px 0 0px rgba(255,255,255,.4),
  968px 286px 0 0px rgba(220,236,255,.5),
  848px -1089px 0 0px rgba(200,220,255,.45),
  -294px -336px 0 0px rgba(255,255,255,.4),
  143px 550px 0 0px rgba(255,255,255,.55),
  420px 777px 0 0px rgba(255,255,255,.4),
  -86px 684px 0 0px rgba(220,236,255,.5),
  193px -1176px 0 0px rgba(255,255,255,.55),
  -929px 664px 0 0px rgba(255,255,255,.4),
  -1172px -526px 0 0px rgba(255,255,255,.4),
  -749px 576px 0 0.3px rgba(255,255,255,.4),
  9px 429px 0 0px rgba(200,220,255,.45),
  -1020px 747px 0 0px rgba(255,255,255,.4),
  633px 406px 0 0px rgba(255,255,255,.55),
  150px 237px 0 0.3px rgba(255,255,255,.55),
  -484px -333px 0 0.3px rgba(220,236,255,.5),
  873px -1045px 0 0px rgba(255,255,255,.55),
  -953px -225px 0 0px rgba(220,236,255,.5),
  -208px 90px 0 0.3px rgba(255,255,255,.55),
  951px -941px 0 0px rgba(255,255,255,.4),
  588px 465px 0 0px rgba(255,255,255,.4),
  22px -280px 0 0px rgba(220,236,255,.5),
  553px 468px 0 0px rgba(220,236,255,.5),
  22px 395px 0 0px rgba(255,255,255,.55),
  421px -957px 0 0px rgba(255,255,255,.4),
  898px -311px 0 0px rgba(220,236,255,.5),
  -608px -482px 0 0px rgba(255,255,255,.4),
  -822px 605px 0 0px rgba(200,220,255,.45),
  -1209px 380px 0 0px rgba(255,255,255,.4),
  163px 21px 0 0px rgba(255,255,255,.4),
  -23px -86px 0 0px rgba(255,255,255,.4),
  165px 33px 0 0px rgba(255,255,255,.55),
  -135px 746px 0 0.3px rgba(255,255,255,.4),
  -131px -780px 0 0.3px rgba(255,255,255,.4),
  394px -1043px 0 0px rgba(255,255,255,.55),
  -188px 87px 0 0.3px rgba(200,220,255,.45),
  -91px -690px 0 0px rgba(255,255,255,.55),
  -325px 517px 0 0px rgba(255,255,255,.4),
  -324px -75px 0 0px rgba(200,220,255,.45),
  -313px 74px 0 0px rgba(200,220,255,.45),
  708px -901px 0 0px rgba(255,255,255,.55),
  -910px -237px 0 0px rgba(255,255,255,.55),
  757px -1060px 0 0px rgba(200,220,255,.45),
  162px 702px 0 0.3px rgba(255,255,255,.55),
  297px 4px 0 0.3px rgba(220,236,255,.5),
  285px -1271px 0 0px rgba(200,220,255,.45),
  -122px -992px 0 0.3px rgba(255,255,255,.4),
  66px 323px 0 0px rgba(255,255,255,.55),
  999px 375px 0 0.3px rgba(255,255,255,.4),
  -154px -7px 0 0px rgba(255,255,255,.55),
  -391px -771px 0 0px rgba(200,220,255,.45),
  183px -151px 0 0px rgba(255,255,255,.55),
  -784px 436px 0 0px rgba(220,236,255,.5),
  -73px -341px 0 0px rgba(220,236,255,.5),
  -284px -530px 0 0px rgba(200,220,255,.45),
  5px -497px 0 0px rgba(255,255,255,.55),
  684px -6px 0 0px rgba(255,255,255,.55),
  -789px -29px 0 0px rgba(220,236,255,.5),
  902px -854px 0 0px rgba(220,236,255,.5),
  144px -249px 0 0px rgba(255,255,255,.55),
  -905px -323px 0 0px rgba(255,255,255,.4); }

/* MID (40 Sterne) */
.tm-galaxy__stars-mid { box-shadow:
  277px 385px 0 0.5px rgba(255,255,255,.85),
  898px 603px 0 0.5px rgba(180,225,255,.85),
  -114px 50px 0 0.5px rgba(180,225,255,.85),
  -169px 87px 0 0.5px rgba(180,225,255,.85),
  -736px -423px 0 0.5px rgba(220,200,255,.75),
  25px 138px 0 0.7px rgba(255,200,225,.7),
  -572px -149px 0 0.8px rgba(180,225,255,.85),
  -185px -89px 0 0.7px rgba(255,200,225,.7),
  -46px -193px 0 0.5px rgba(180,225,255,.85),
  -672px -135px 0 0.8px rgba(220,200,255,.75),
  -760px 230px 0 0.8px rgba(180,225,255,.85),
  -330px -995px 0 0.7px rgba(255,255,255,.85),
  -771px -123px 0 0.8px rgba(220,200,255,.75),
  427px -53px 0 0.5px rgba(220,200,255,.75),
  -153px 235px 0 1px rgba(220,200,255,.75),
  -62px -111px 0 0.8px rgba(255,200,225,.7),
  -769px -518px 0 1px rgba(255,255,255,.85),
  1038px -376px 0 1px rgba(255,255,255,.85),
  -46px -146px 0 1px rgba(255,200,225,.7),
  723px -621px 0 0.8px rgba(255,255,255,.85),
  -755px 967px 0 0.5px rgba(220,200,255,.75),
  17px -150px 0 0.7px rgba(180,225,255,.85),
  489px -282px 0 1px rgba(255,255,255,.85),
  -230px 163px 0 0.8px rgba(180,225,255,.85),
  708px -814px 0 0.8px rgba(220,200,255,.75),
  -526px -1170px 0 1px rgba(180,225,255,.85),
  118px 236px 0 0.7px rgba(180,225,255,.85),
  46px -82px 0 0.7px rgba(255,200,225,.7),
  258px 336px 0 0.8px rgba(255,200,225,.7),
  -453px -1156px 0 0.5px rgba(220,200,255,.75),
  220px -1156px 0 1px rgba(220,200,255,.75),
  450px 343px 0 1px rgba(255,255,255,.85),
  311px -30px 0 1px rgba(180,225,255,.85),
  -172px -126px 0 0.5px rgba(255,255,255,.85),
  -751px -175px 0 0.8px rgba(255,255,255,.85),
  43px 160px 0 1px rgba(180,225,255,.85),
  820px -235px 0 0.8px rgba(220,200,255,.75),
  133px -186px 0 1px rgba(220,200,255,.75),
  575px 344px 0 0.5px rgba(255,200,225,.7),
  -974px 131px 0 0.7px rgba(255,255,255,.85); }

/* NEAR (22 Sterne — bunt, hell) */
.tm-galaxy__stars-near { box-shadow:
  164px 506px 0 1.2px rgba(150,230,255,1),
  22px -357px 0 1.4px rgba(180,255,210,.95),
  -206px -642px 0 1px rgba(255,230,150,.95),
  -553px 296px 0 1.2px rgba(255,180,220,.95),
  645px -765px 0 1.2px rgba(150,230,255,1),
  257px 538px 0 1.4px rgba(255,255,255,1),
  -1121px -204px 0 1px rgba(180,255,210,.95),
  418px 115px 0 1px rgba(180,255,210,.95),
  307px -20px 0 1px rgba(180,255,210,.95),
  211px 626px 0 1.6px rgba(255,255,255,1),
  102px 469px 0 1.2px rgba(180,255,210,.95),
  742px -80px 0 1.2px rgba(255,255,255,1),
  96px 178px 0 1.6px rgba(255,255,255,1),
  -762px -832px 0 1.2px rgba(255,180,220,.95),
  -565px 524px 0 1.2px rgba(255,230,150,.95),
  431px -313px 0 1px rgba(150,230,255,1),
  -552px -162px 0 1.2px rgba(255,180,220,.95),
  -1121px 169px 0 1px rgba(150,230,255,1),
  -179px -889px 0 1.2px rgba(255,230,150,.95),
  805px 798px 0 1px rgba(150,230,255,1),
  410px -22px 0 1.6px rgba(150,230,255,1),
  814px -761px 0 1.4px rgba(180,255,210,.95); }

/* ─────────────────────────────────────────────────────────────────
   Mobile Reduction (max-width:600px)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .tm-galaxy__stars-far { opacity: .35; }
  .tm-galaxy__stars-mid { opacity: .55; }
  .tm-galaxy__nebula { filter: blur(6px) saturate(1); }

  /* Owner-Bug 2026-05-07: Glitch auf Mobile-GPU. Star-Rotationen
     verursachen permanenten Composite-Druck hinter den blur'd
     Navbar/Bottom-Nav Layern. Auf Mobile bleiben die Sterne SICHTBAR
     aber statisch. Nebula-Drift bleibt aktiv (sehr guenstig). */
  .tm-galaxy__stars-far,
  .tm-galaxy__stars-mid,
  .tm-galaxy__stars-near {
    animation: none !important;
    /* Statische Position: leicht rotiert damit es nicht "aufgereiht" wirkt */
    transform: translate(-50%, -50%) rotate(15deg);
  }
}

/* Reduced Motion — alle Animationen aus, statisches Sternfeld bleibt */
@media (prefers-reduced-motion: reduce) {
  .tm-galaxy__nebula,
  .tm-galaxy__stars-far,
  .tm-galaxy__stars-mid,
  .tm-galaxy__stars-near { animation: none !important; }
}