/* ============================================================================
   SH_CINEMA_V1 — Kino-Ebene (Awwwards-Richtung 2026), performant, kein Lenis/GSAP.
   Nur Desktop (>=1001px) & nicht reduced-motion (html.cine). Mobil/RM: neutral.
   V2 (2026-07-22): Konzept-Pin RAUS (die geliebte gestaffelte Karten-Reveal bleibt
   erhalten), Hero-Pin kürzer, Kinetik-Typo kleiner & deutlich sichtbarer.
   ========================================================================== */

/* ---- (2) LEBENDIGER SHADER-HINTERGRUND (WebGL-Nebel) ----------------------- */
.cine-neb{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;
  opacity:0;transition:opacity 1.2s ease}
.cine-neb.on{opacity:1}
/* Alte Ambient-Orbs/Beam BLEIBEN (geschichtete Tiefe + Leben auf unteren Sektionen,
   wo der Nebel einfriert). Nur leicht gedämpft, damit sie mit dem Nebel harmonieren. */
html.cine .orb{opacity:.26}
html.cine .beam{opacity:.6}

/* ============================================================================
   (1) SCROLL-KINO IM HERO — Hero pinnt kurz, Szene verwandelt sich beim Scrollen.
   Kürzer als V1 (122vh statt 158) → weniger Leerlauf, schneller wieder Inhalt.
   ========================================================================== */
html.cine .hero{min-height:122vh;padding-top:0}
html.cine .hero > .wrap.hero-grid{position:sticky;top:0;min-height:100vh;
  align-content:center;padding-top:96px;padding-bottom:40px}
/* Text-Spalte: hebt sich leicht, skaliert & blendet beim Weggehen aus */
html.cine .hero-grid > div:first-child{transform-origin:left center;
  transform:translateY(calc(var(--hp,0) * -6vh)) scale(calc(1 - var(--hp,0) * .06));
  opacity:calc(1 - var(--hp,0) * 1.15);will-change:transform,opacity}
/* Server: zoomt heran, dreht leicht, gibt dann frei */
html.cine .hero-orbit{
  transform:translateY(calc(var(--hp,0) * 2vh)) scale(calc(1 + var(--hp,0) * .26)) rotate(calc(var(--hp,0) * -4deg));
  opacity:calc(1 - var(--hp,0) * .7);will-change:transform,opacity}
/* Scroll-Hinweis am unteren Rand des gepinnten Hero (JS hängt ihn an die sticky Grid) */
.cine-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--soft);
  display:flex;flex-direction:column;align-items:center;gap:9px;opacity:calc(1 - var(--hp,0) * 3);pointer-events:none}
.cine-scroll .cine-scroll__l{width:1px;height:34px;background:linear-gradient(var(--ion),transparent);position:relative;overflow:hidden}
.cine-scroll .cine-scroll__l::after{content:"";position:absolute;top:-40%;left:0;width:100%;height:40%;background:var(--ion);animation:cineScroll 1.8s var(--ease) infinite}
@keyframes cineScroll{to{top:100%}}
html:not(.cine) .cine-scroll{display:none}

/* ============================================================================
   (3) KONZEPT — KEIN Pin mehr. Die bestehende gestaffelte Karten-Reveal
   (shRevealIn/„Kästen kommen rein") bleibt vollständig erhalten. Nur ein
   dezenter Tiefen-Parallax der ganzen Sektion als Kino-Akzent (GPU, optional).
   ========================================================================== */
html.cine #concept .pillars{perspective:1600px}

/* ============================================================================
   (4) KINETISCHE STATEMENT-TYPO — kleiner & sichtbarer als V1, gescrubbte Bänder.
   ========================================================================== */
.cine-kin{position:relative;overflow:hidden;padding:40px 0;pointer-events:none;z-index:1;text-align:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cine-kin b{display:block;white-space:nowrap;font-family:var(--disp);font-weight:700;line-height:.92;
  font-size:clamp(30px,5.6vw,78px);letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:1.2px rgba(169,219,245,.55);
  transform:translateX(var(--kx,0));will-change:transform}
.cine-kin b.fill{color:var(--white);-webkit-text-stroke:0;opacity:.14}
.cine-kin b .io{color:var(--ion);-webkit-text-stroke-color:rgba(169,219,245,.85)}
.cine-kin b .ol{color:var(--olive-t);-webkit-text-stroke-color:rgba(168,184,106,.8)}
@media (prefers-reduced-motion:reduce){.cine-kin b{transform:none !important}}
@media (max-width:1000px){.cine-kin{padding:30px 0}.cine-kin b{font-size:clamp(28px,8vw,58px);-webkit-text-stroke-width:1px}}

/* Sicherheit: falls Kino aus ist, darf die Hero-Pin-Höhe nie stehen bleiben */
html:not(.cine) .hero{min-height:0}