/* =====================================================================
   LICHTSCHNITT — Awwwards-Schicht für szenenmeister.de
   "Die Seite ist ein abgedunkelter Vorführraum: der Projektor schaltet ein."
   Progressive Enhancement über styles.css. Greift nur, wenn JS + Fähigkeiten
   passen (html.licht). Ohne JS / reduced-motion bleibt die Basisseite intakt.
   ===================================================================== */

/* ---- Reveal-Übergabe: GSAP steuert Reveals, wenn html.licht aktiv ---- */
html.licht .reveal { opacity: 0; transform: translateY(28px); transition: none; will-change: opacity, transform; }
/* Sicherheitsnetz: falls die Enhancement-JS scheitert, Inhalt nach 2.5s zeigen */
html.licht-failsafe .reveal { opacity: 1 !important; transform: none !important; }

/* Globale film-noir Bühne nur wenn cinematic aktiv */
html.licht body { background: #08080c; }

/* =====================================================================
   1) Statische Vignette (KEIN animiertes Korn, KEINE Scanlines -> kein Flackern)
   ===================================================================== */
.licht-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 94;
  background: radial-gradient(125% 100% at 50% 42%, transparent 62%, rgba(0,0,0,.5) 100%);
}
html:not(.licht) .licht-vignette { display: none; }

/* =====================================================================
   2) Hero — Projektor-Canvas + Kino-Chrome
   ===================================================================== */
#hero-gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity .8s var(--ease);
}
html.gl-ok #hero-gl.on { opacity: 1; }
/* Wenn WebGL-Hero LÄUFT (gl-live, nicht nur gl-ok), die statischen Orbs ausblenden */
html.gl-live .sm-hero .sm-orbs { opacity: 0; transition: opacity .6s var(--ease); }

/* REC-Chrome im Bild-Rahmen: blinkender Punkt + tickender Timecode */
.rec-chrome {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  display: flex; align-items: center; gap: .5rem;
  padding: .34rem .7rem; border-radius: 999px;
  background: rgba(8,8,12,.62); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .72rem; letter-spacing: .04em; color: #fff;
  opacity: 0; pointer-events: none;
}
html.licht .rec-chrome { opacity: 1; transition: opacity .5s var(--ease) .8s; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b;
  box-shadow: 0 0 10px #ff3b3b; animation: rec-blink 1.1s steps(1) infinite; }
@keyframes rec-blink { 0%,49%{opacity:1} 50%,100%{opacity:.18} }
.rec-tc { font-variant-numeric: tabular-nums; }

/* Anamorpher Hover-Flare über Reel-Cards (CSS, billig) */
.reel-card .reel-flare {
  position: absolute; left: -40%; top: 50%; z-index: 3; width: 60%; height: 2px;
  transform: translateY(-50%) scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, transparent, #fff, var(--neon-cyan), transparent);
  filter: blur(1px); opacity: 0; pointer-events: none; transition: none;
}
html.licht .reel-card:hover .reel-flare {
  animation: reel-flare-sweep .7s var(--ease);
}
@keyframes reel-flare-sweep {
  0%{ left:-40%; transform:translateY(-50%) scaleX(.4); opacity:0 }
  35%{ opacity:1 } 100%{ left:120%; transform:translateY(-50%) scaleX(1); opacity:0 }
}

/* =====================================================================
   3) Headline Wort-/Zeilen-Split (Hero) + kinetischer Skew
   ===================================================================== */
.sm-hero h1 .ln { display: block; overflow: hidden; }
.sm-hero h1 .w { display: inline-block; }
.sm-hero h1 .w .wi { display: inline-block; will-change: transform; }
/* Gel-Wisch über die neon-text Zeilen */
html.licht .sm-hero h1 .neon-text { display: inline-block; }

/* =====================================================================
   4) Custom Cursor (nur Desktop / pointer:fine, kein reduced-motion)
   ===================================================================== */
.licht-cursor, .licht-cursor-ring { position: fixed; top: 0; left: 0; z-index: 999;
  pointer-events: none; border-radius: 50%; opacity: 0; }
.licht-cursor { width: 8px; height: 8px; background: #fff; margin: -4px 0 0 -4px;
  mix-blend-mode: difference; transition: opacity .3s, width .2s, height .2s; }
.licht-cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid rgba(255,255,255,.55);
  transition: opacity .3s, width .25s var(--ease), height .25s var(--ease), border-color .25s, background .25s; }
html.cursor-on .licht-cursor, html.cursor-on .licht-cursor-ring { opacity: 1; }
html.cursor-on, html.cursor-on a, html.cursor-on button { cursor: none; }
.licht-cursor-ring.is-link { width: 58px; height: 58px; border-color: var(--c-orange); background: rgba(230,126,34,.08); }
.licht-cursor-ring.is-reel { width: 64px; height: 64px; border-color: var(--neon-cyan);
  background: rgba(34,211,238,.12); }
.licht-cursor-ring.is-reel::after { content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff; }
/* Cursor nur bei feinem Zeiger */
@media (hover: none), (pointer: coarse) { .licht-cursor, .licht-cursor-ring { display: none !important; } }

/* =====================================================================
   5) Scroll-Fortschritt unter dem Header
   ===================================================================== */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 101;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta), var(--c-orange), var(--c-amber));
  background-size: 200% auto; opacity: 0; }
html.licht .scroll-progress { opacity: 1; }

/* =====================================================================
   6) Showreel — Kino-Letterbox + Desktop-Filmstrip
   ===================================================================== */
.cinebars { position: fixed; left: 0; right: 0; z-index: 92; background: #000; height: 0;
  pointer-events: none; opacity: 0; }
.cinebars.top { top: 0; } .cinebars.bottom { bottom: 0; }

/* Filmstrip = NATIVER horizontaler Scroller (kein Pin, kein Scroll-Hijack).
   Eigener overflow-x:auto-Bereich; vertikaler Seiten-Scroll bleibt nativ. */
.reel-grid.filmstrip {
  display: flex; flex-wrap: nowrap; grid-template-columns: none;
  gap: 1.4rem; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding: .4rem .25rem 1.3rem; cursor: grab;
  scrollbar-width: thin; scrollbar-color: var(--c-orange) rgba(255,255,255,.08);
  overscroll-behavior-x: contain;
}
.reel-grid.filmstrip.dragging { cursor: grabbing; scroll-snap-type: none; }
.reel-grid.filmstrip::-webkit-scrollbar { height: 6px; }
.reel-grid.filmstrip::-webkit-scrollbar-track { background: rgba(255,255,255,.07); border-radius: 999px; }
.reel-grid.filmstrip::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--neon-cyan), var(--c-orange)); border-radius: 999px; }
.reel-grid.filmstrip .reel-card { width: clamp(230px, 22vw, 300px); flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.reel-grid.filmstrip .reel-card::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 6px; z-index: 4; height: 6px;
  background-image: radial-gradient(circle, rgba(255,255,255,.5) 0 2px, transparent 2.5px);
  background-size: 16px 6px; background-repeat: repeat-x; opacity: .5; pointer-events: none;
}
/* Pro-Reel Akzentfarbe (DOM-Reihenfolge: Patisserie, Unternehmer, Imkerei, Handwerk, Galabau, Kaffee, BTS, IG) */
.reel-grid .reel-card { --accent: var(--neon-cyan); }
.reel-grid .reel-card:nth-child(1){ --accent: var(--c-amber); }
.reel-grid .reel-card:nth-child(2){ --accent: var(--neon-cyan); }
.reel-grid .reel-card:nth-child(3){ --accent: var(--c-orange); }
.reel-grid .reel-card:nth-child(4){ --accent: var(--neon-magenta); }
.reel-grid .reel-card:nth-child(5){ --accent: var(--neon-violet); }
.reel-grid .reel-card:nth-child(6){ --accent: var(--c-amber); }
.reel-grid .reel-card:nth-child(7){ --accent: var(--neon-blue); }
html.licht .reel-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 30px -4px var(--accent), var(--shadow); }
html.licht .reel-card:hover .reel-meta .tag { color: var(--accent); }

/* '01 — 08' Fortschrittsmarker am Filmstrip */
.film-marker { display: none; }
html.licht .reel-grid.filmstrip ~ .film-marker,
html.licht .film-marker.show { display: flex; }
.film-marker { align-items: baseline; gap: .5rem; justify-content: center; margin-top: 1.6rem;
  font-family: var(--font-head); color: var(--c-muted); letter-spacing: .12em; font-size: .8rem; }
.film-marker .cur { color: #fff; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.film-marker .bar { width: clamp(80px,18vw,200px); height: 2px; background: rgba(255,255,255,.14); position: relative; border-radius: 2px; }
.film-marker .bar i { position: absolute; inset: 0 auto 0 0; width: 12%; background: var(--c-orange); border-radius: 2px; transform-origin: left; }

/* =====================================================================
   7) About-Zitat: Wort-für-Wort "ausleuchten" (scrub)
   ===================================================================== */
.q-split .qw { --l: 0; --dim: #4d4d57; --lit: #ffffff;
  color: #4d4d57;
  color: color-mix(in srgb, var(--dim) calc((1 - var(--l)) * 100%), var(--lit) calc(var(--l) * 100%));
  transition: none; }
.q-split .qw.amber { --lit: var(--c-amber); }
.q-split .qw.cyan  { --lit: var(--neon-cyan); }
html.licht .q-split .qw.amber[style*="--l: 1"],
html.licht .q-split .qw.cyan[style*="--l: 1"] { text-shadow: 0 0 18px currentColor; }
/* Ohne color-mix-Support: lesbarer Fallback */
@supports not (color: color-mix(in srgb, red, blue)) {
  .q-split .qw { color: #ECECF1; }
}

/* =====================================================================
   8) Sektions-Licht: Eyebrow-"Lichtschalter" + Karten-Lichtschwenk
   ===================================================================== */
html.licht .section-title .eyebrow,
html.licht .section-title .neon-divider { will-change: clip-path, transform; }

html.licht .feature, html.licht .price, html.licht .work-feature, html.licht .work-copy { position: relative; }
html.licht .feature::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 45%);
  opacity: 0; transition: opacity .35s var(--ease);
}
html.licht .feature:hover::after { opacity: 1; }

/* Magnetische Buttons: Transform von JS, Transition beim Reset */
html.licht .magnetic { will-change: transform; }

/* Pricing "Beliebt"-Karte atmet */
html.licht .price.featured { animation: licht-breathe 4.5s ease-in-out infinite; }
@keyframes licht-breathe {
  0%,100%{ box-shadow: 0 0 0 1px rgba(230,126,34,.4), 0 0 26px -6px rgba(230,126,34,.5) }
  50%{ box-shadow: 0 0 0 1px rgba(251,191,36,.6), 0 0 46px -2px rgba(230,126,34,.7) }
}

/* Header-Scrollprogress-Linie schon vorhanden; Nav-Hover-Glow */
html.licht .nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px;
  background: var(--c-orange); box-shadow: 0 0 8px var(--c-orange); transition: right .3s var(--ease); }
html.licht .nav a { position: relative; }
html.licht .nav a:hover::after, html.licht .nav a.active::after { right: 0; }

/* =====================================================================
   9) Reduced-Motion & Mobile-Sicherungen
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  #hero-gl { display: none; }
  .licht-cursor, .licht-cursor-ring { display: none !important; }
  html.licht .reveal { opacity: 1; transform: none; }
  .reel-grid.filmstrip { display: grid; grid-template-columns: repeat(2, 1fr); width: auto; }
}
@media (max-width: 880px) {
  /* Kein Pin/Filmstrip auf Mobil — zurück zum Grid (JS setzt .filmstrip nicht, dies ist Schutz) */
  .reel-grid.filmstrip { display: grid; grid-template-columns: repeat(2, 1fr); width: auto; padding: 0; }
  .reel-grid.filmstrip .reel-card { width: auto; }
  .reel-grid.filmstrip .reel-card::before { display: none; }
  .cinebars { display: none; }
  .rec-chrome { font-size: .64rem; top: 10px; left: 10px; }
}