/* TB-Software 2026, Sinus-Nebel im Hero (5 Layer, GPU-Drift) */

.tb-sine-fog {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.tb-sine-fog svg {
  width: 200%;
  height: 100%;
  display: block;
}

/* Drift-Animation per CSS, GPU-only */
@keyframes tb-fog-drift-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tb-fog-drift-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.tb-sine-fog g {
  will-change: transform;
}
.tb-sine-fog .tb-fog-1 { animation: tb-fog-drift-left  90s linear infinite; }
.tb-sine-fog .tb-fog-2 { animation: tb-fog-drift-right 60s linear infinite; }
.tb-sine-fog .tb-fog-3 { animation: tb-fog-drift-left  45s linear infinite; }
.tb-sine-fog .tb-fog-4 { animation: tb-fog-drift-right 35s linear infinite; }
.tb-sine-fog .tb-fog-5 { animation: tb-fog-drift-left  25s linear infinite; }

/* Energie sparen wenn Tab unsichtbar */
:where(html[data-tab-hidden="1"]) .tb-sine-fog g {
  animation-play-state: paused;
}

/* Reduced Motion: statisches Bild */
@media (prefers-reduced-motion: reduce) {
  .tb-sine-fog g { animation: none !important; }
}

/* Hero-Hintergrund-Verlauf hinter dem Nebel */
.tb-hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, color-mix(in srgb, var(--tb-accent-cyan) 8%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--tb-bg) 0%, color-mix(in srgb, var(--tb-primary-50) 40%, var(--tb-bg)) 100%);
}