/* ============================================================
   TW Projects — scroll-scrubbed video background (shared)
   Used on pages that include a #bg canvas (index, angebot, ki-check).
   Tames the bright video into a calm background + keeps text legible.
   ============================================================ */

.bg-poster, #bg {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none; display: block;
  filter: brightness(0.6) saturate(0.88) contrast(1.03);   /* calm, readable background */
}
.bg-poster { object-fit: cover; }
#bg { opacity: 0; transition: opacity .5s ease; }
#bg.ready { opacity: 1; }

/* Readability scrim over the moving video */
.bg-scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(140% 110% at 50% 45%, transparent 22%, rgba(6,8,15,.52) 100%),
    linear-gradient(180deg, rgba(6,8,15,.52) 0%, rgba(6,8,15,.12) 20%, rgba(6,8,15,.12) 70%, rgba(6,8,15,.64) 100%);
}

/* Stronger text halo + denser glass cards for the brighter video background */
html[data-theme="dark"] {
  --text-halo: 0 0 24px var(--bg-base), 0 0 10px var(--bg-base), 0 1px 4px rgba(0,0,0,.55);
  --glass-2: rgba(8, 13, 27, 0.88);
}

/* Lenis smooth scroll (owns smoothing; native smooth-scroll off so they don't fight) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Prozess (index only): one continuous panel that grows with the progress line */
#prozess .timeline { position: relative; }
#prozess .tl-panel {
  position: absolute; z-index: 0;
  left: clamp(30px, 5vw, 70px); right: -10px; top: -10px; bottom: -10px;
  border-radius: 22px;
  background: rgba(7, 11, 23, 0.5);
  -webkit-backdrop-filter: blur(13px) saturate(118%);
  backdrop-filter: blur(13px) saturate(118%);
  border: 1px solid rgba(130, 160, 210, 0.08);
  clip-path: inset(0 0 100% 0 round 22px);   /* starts hidden, grown via JS */
  will-change: clip-path;
}
#prozess .phase { position: relative; z-index: 1; }
#prozess .phase-body { padding-right: 24px; }

@media (prefers-reduced-motion: reduce) { #bg { display: none; } }

/* ---- Mobile performance: kill backdrop blur over the live canvas ----
   Re-blurring every frosted surface against the animating background on each
   scrub frame is the dominant scroll-jank source on phones. Drop blur entirely
   and lean on near-opaque fills so text stays legible. */
@media (max-width: 767px) {
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .glass { background: rgba(13, 21, 42, 0.92); }
  #prozess .tl-panel { background: rgba(8, 13, 27, 0.92); }
  .logo-marquee { background: rgba(8, 13, 27, 0.92); }
  .loop-tip { background: rgba(13, 21, 42, 0.96); }
  header.site.scrolled { background: rgba(6, 8, 15, 0.95); }
  .nav-links { background: rgba(6, 8, 15, 0.98); }
}