/* =============================================================
   football-comets.css — 3D Sternschnuppen-Background v1
   =============================================================
   WHY: Owner-Wunsch, statt schwebender Floater echte Kometen mit
   Neon-Schweif. Pure CSS, GPU-only, isoliert.

   Aktivierung: window.COMETS_BG_ENABLED = true (in index.html)
   schaltet via body.comets-on das Layer ein und blendet den
   alten #tm-footballs aus. Notbremse: Flag auf false setzen.

   Performance:
   - Nur transform / opacity / filter
   - prefers-reduced-motion: alles aus
   - Mobile (<600px): Reduktion auf 5 Bahnen
   - pointer-events: none, z-index 0 (unter App-Content)
   - Container hat eigenen Stacking-Context, beruehrt Layout nie
   ============================================================= */

#tm-comets {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  perspective: 800px;
  perspective-origin: 50% 40%;
}

/* Komplett aus, solange Feature-Flag nicht aktiv */
#tm-comets { display: none; }
body.comets-on #tm-comets { display: block; }

/* Wenn Comets aktiv sind: alten Floater verstecken */
body.comets-on #tm-footballs { display: none !important; }

/* WHY drei Layer: Parallax-Tiefe (.tm-comet) muss von Bahn-Translate
   (.tm-comet__path) und Spin (.tm-comet__ball) entkoppelt sein, sonst
   ueberschreibt die Animation den translateZ. */
.tm-comet {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.tm-comet__path {
  position: absolute;
  top: 0;
  left: 0;
}

.tm-comet__ball {
  display: block;
  position: relative;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #ffffff 0%, #d8ffe9 35%, #00e676 75%, #008f3a 100%);
  box-shadow:
    /* Hot core forward */
    0 0 6px rgba(255, 255, 255, .9),
    /* Trail layers — directed back-left (bahn faellt von rechts oben nach links unten) */
    8px -8px 12px rgba(255, 255, 255, .55),
    18px -18px 22px rgba(0, 230, 118, .8),
    34px -34px 36px rgba(0, 230, 118, .45),
    62px -62px 70px rgba(0, 230, 118, .18),
    100px -100px 110px rgba(0, 230, 118, .08);
  filter: saturate(1.15);
  /* Owner-Wunsch 2026-05-07: kein Spin mehr — Sternschnuppen-Look mit
     festem Schweif-Vektor pro Bahn. */
}

/* Ein paar Kometen fliegen die andere Diagonale (links-oben → rechts-unten):
   Schweif spiegelverkehrt. */
.tm-comet--mirror .tm-comet__ball {
  box-shadow:
    0 0 6px rgba(255, 255, 255, .9),
    -8px -8px 12px rgba(255, 255, 255, .55),
    -18px -18px 22px rgba(0, 230, 118, .8),
    -34px -34px 36px rgba(0, 230, 118, .45),
    -62px -62px 70px rgba(0, 230, 118, .18),
    -100px -100px 110px rgba(0, 230, 118, .08);
}

/* Parallax-Tiefen ----------------------------------------------- */
.tm-comet--far  { transform: translateZ(-260px); opacity: .35; }
.tm-comet--mid  { transform: translateZ(-90px);  opacity: .55; }
.tm-comet--near { transform: translateZ(40px);   opacity: .85; }

/* Bahn-Animationen — diagonale Sweeps mit leichten Y-Wellen ---- */
/* Pfade nutzen vw/vh damit die Kometen ueber die ganze Sichtbreite
   fliegen, unabhaengig vom Viewport. */

@keyframes pathA {
  0%   { transform: translate3d(110vw, -10vh, 0) rotate(0deg); }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translate3d(-15vw, 95vh, 0) rotate(0deg); opacity: 0; }
}

@keyframes pathB {
  0%   { transform: translate3d(120vw, 35vh, 0); }
  10%  { opacity: 1; }
  100% { transform: translate3d(-20vw, 80vh, 0); opacity: 0; }
}

@keyframes pathC {
  0%   { transform: translate3d(95vw, -8vh, 0); }
  8%   { opacity: 1; }
  100% { transform: translate3d(10vw, 110vh, 0); opacity: 0; }
}

@keyframes pathD {
  0%   { transform: translate3d(-12vw, 5vh, 0); }
  12%  { opacity: 1; }
  100% { transform: translate3d(115vw, 70vh, 0); opacity: 0; }
}

@keyframes pathE {
  0%   { transform: translate3d(-15vw, 60vh, 0); }
  10%  { opacity: 1; }
  100% { transform: translate3d(108vw, -10vh, 0); opacity: 0; }
}

@keyframes cometSpin {
  to { transform: rotate(360deg); }
}

/* Kometen-Kombinationen — Bahn-Animation auf path-wrapper, damit
   die Layer-translateZ am .tm-comet erhalten bleibt.
   Owner-Wunsch 2026-05-07: schneller (~60% der vorherigen Werte). */
.tm-comet--p1 .tm-comet__path { animation: pathA 9s linear infinite;  animation-delay: 0s; }
.tm-comet--p2 .tm-comet__path { animation: pathB 13s linear infinite; animation-delay: 2s; }
.tm-comet--p3 .tm-comet__path { animation: pathC 11s linear infinite; animation-delay: 5s; }
.tm-comet--p4 .tm-comet__path { animation: pathA 15s linear infinite; animation-delay: 7s; }
.tm-comet--p5 .tm-comet__path { animation: pathD 12s linear infinite; animation-delay: 1s; }
.tm-comet--p6 .tm-comet__path { animation: pathE 14s linear infinite; animation-delay: 4s; }
.tm-comet--p7 .tm-comet__path { animation: pathC 17s linear infinite; animation-delay: 9s; }
.tm-comet--p8 .tm-comet__path { animation: pathB 10s linear infinite; animation-delay: 6s; }

/* Explosions-Burst — wird parallel zur Bahn getriggert.
   Pseudo-Element rendert einen kurzen Flash + Funken am Bahnen-Ende. */
.tm-comet--burst .tm-comet__ball::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(0,230,118,.8) 30%, rgba(64,196,255,.4) 55%, transparent 75%);
  opacity: 0;
  pointer-events: none;
  animation: cometBurst 9s linear infinite;
}
.tm-comet--burst.tm-comet--p2 .tm-comet__ball::after { animation-duration: 13s; }
.tm-comet--burst.tm-comet--p4 .tm-comet__ball::after { animation-duration: 15s; }
.tm-comet--burst.tm-comet--p7 .tm-comet__ball::after { animation-duration: 17s; }

@keyframes cometBurst {
  0%, 86%        { opacity: 0; transform: scale(.4); }
  88%            { opacity: 1; transform: scale(1.0); filter: blur(0); }
  92%            { opacity: .85; transform: scale(3.5); filter: blur(2px); }
  96%            { opacity: 0; transform: scale(7); filter: blur(8px); }
  100%           { opacity: 0; transform: scale(0.4); }
}

/* Mobile: weniger Bahnen, sanftere Optik (Battery + visuelle Ruhe).
   Owner-Bug 2026-05-07: zusaetzlich p3 + p7 ausblenden (von 5 auf 3
   sichtbare Bahnen reduziert) damit weniger permanent fliegende
   `position:fixed` Elemente hinter den blur'd Navbar/Bottom-Nav-
   Layern kompositieren — vermindert Mobile-GPU-Glitches. */
@media (max-width: 600px) {
  .tm-comet--p3,
  .tm-comet--p4,
  .tm-comet--p6,
  .tm-comet--p7,
  .tm-comet--p8 { display: none; }
  .tm-comet__ball {
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    margin-top: -5.5px;
    box-shadow:
      0 0 5px rgba(255, 255, 255, .85),
      6px -6px 9px rgba(255, 255, 255, .45),
      14px -14px 18px rgba(0, 230, 118, .7),
      26px -26px 28px rgba(0, 230, 118, .35),
      48px -48px 56px rgba(0, 230, 118, .14);
  }
  .tm-comet--mirror .tm-comet__ball {
    box-shadow:
      0 0 5px rgba(255, 255, 255, .85),
      -6px -6px 9px rgba(255, 255, 255, .45),
      -14px -14px 18px rgba(0, 230, 118, .7),
      -26px -26px 28px rgba(0, 230, 118, .35),
      -48px -48px 56px rgba(0, 230, 118, .14);
  }
}

/* Reduced Motion: alles aus, Container leer aber vorhanden */
@media (prefers-reduced-motion: reduce) {
  body.comets-on #tm-comets { display: none; }
  body.comets-on #tm-footballs { display: block !important; }
  .tm-comet,
  .tm-comet__ball { animation: none !important; }
}