/* Cinematic-Hero Büroreinigung «Die Glaswand» (übernommen von stettler-hauswartung.ch)
   Modus kommt aus JS als html[data-hero]: video | seq | static.
   Ohne Attribut (kein JS) gilt static: Endbild mit allen Texten. */

:root {
  --bar-h: 0px; /* Höhe der fixen Handy-Leiste «Anrufen / Offerte» */
  --tshadow: 0 1px 2px rgba(6, 10, 14, .9), 0 3px 12px rgba(6, 10, 14, .6), 0 8px 34px rgba(6, 10, 14, .5);
  --cine-bg: #121a23;
}

.cine { position: relative; background: var(--cine-bg); }
/* Desktop: längerer Scrollweg, damit die Wischbewegung nicht im Zeitraffer läuft (Feedback 25.09.) */
html[data-hero="video"] .cine { height: 440vh; }   /* 5 s Video, ≈ 85vh pro Sekunde (Kristijans Tempo, 25.09.) */
html[data-hero="seq"] .cine { height: 250svh; }

.cine__stage {
  position: relative;
  height: calc(100svh - var(--header-h) - var(--bar-h));
  min-height: 540px;
  overflow: hidden;
  background: var(--cine-bg);
  isolation: isolate;
}
html[data-hero="video"] .cine__stage,
html[data-hero="seq"] .cine__stage { position: sticky; top: var(--header-h); }

.cine__poster, .cine__video, .cine__seq {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.cine__poster { background: var(--cine-bg) center / cover no-repeat; }
.cine__video { object-fit: cover; opacity: 0; transform: translateZ(0); transition: opacity .6s var(--ease); }
.cine.video-ready .cine__video { opacity: 1; }
.cine__video, .cine__seq { display: none; }
html[data-hero="video"] .cine__video { display: block; }
html[data-hero="seq"] .cine__seq { display: block; }

/* Standbild nur im Static-Modus: der CSS-Hintergrund lädt nur, wenn die Regel greift */
html:not([data-hero]) .cine__poster,
html[data-hero="static"] .cine__poster { background-image: url("../hero/hero-ende.jpg?v=2"); }
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px) {
  html:not([data-hero]) .cine__poster,
  html[data-hero="static"] .cine__poster { background-image: url("../hero/hero-ende-mobile.webp?v=2"); background-position: center; }
}

/* Grund-Scrim links, wo die Texte stehen: kein Bild steht je roh hinter der Schrift */
.cine__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 12, 18, .5) 0%, rgba(8, 12, 18, .2) 38%, rgba(8, 12, 18, 0) 55%, rgba(8, 12, 18, .2) 75%, rgba(8, 12, 18, .5) 100%),
    linear-gradient(0deg, rgba(8, 12, 18, .35) 0%, rgba(8, 12, 18, 0) 30%);
}

/* ---------- Text-Bänder ---------- */
.cine__bands { position: absolute; inset: 0; pointer-events: none; }
.band {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  color: var(--on-dark);
  text-shadow: var(--tshadow);
  isolation: isolate;
}
.band a { pointer-events: auto; }
.band .btn { text-shadow: none; }
.band::before {
  content: ""; position: absolute; inset: -40% -30%; z-index: -1; pointer-events: none;
  opacity: calc(.25 + .75 * var(--k, 1));
  background: radial-gradient(ellipse 58% 52% at 50% 50%, rgba(8, 12, 18, .62) 0%, rgba(8, 12, 18, .4) 46%, rgba(8, 12, 18, 0) 76%);
}

.band--left { width: min(40vw, 34rem); left: clamp(1.25rem, 5vw, 6.5rem); }
/* Schlussbild: die Mitarbeiterin steht links gross im Bild, deshalb steht der Abschluss rechts */
.band--settle { width: min(31vw, 28rem); right: clamp(1.25rem, 2.5vw, 3rem); left: auto; }
.band--left { top: 50%; translate: 0 -50%; }
.band--settle { top: 50%; translate: 0 -50%; }

.cine .eyebrow { color: var(--sky-500); margin-bottom: 0; }
.cine .eyebrow::before { background: var(--sky-500); }
.cine h1, .band__title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--on-dark);
  text-wrap: balance;
}
.cine h1 { font-size: clamp(2.3rem, 1rem + 3.4vw, 4.4rem); margin-top: 1rem; max-width: 13ch; }
.cine h1 em { font-style: normal; color: var(--sky-500); }
.band__title { font-size: clamp(1.8rem, 1rem + 2.2vw, 3rem); max-width: 16ch; }
.band__sub {
  margin-top: 1rem;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.22rem);
  line-height: 1.55;
  color: var(--on-dark);
  max-width: 40ch;
}
.band__note { display: flex; align-items: center; gap: .5rem; margin-top: 1.2rem; font-size: .95rem; }
.band__note .icon { width: 16px; height: 16px; color: var(--sky-500); flex: none; }

/* «Was wir übernehmen» im Endbild */
.band__list {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem 1.5rem;
  font-size: .98rem;
  font-weight: 500;
}
.band__list li { display: flex; align-items: flex-start; gap: .55rem; }
.band__list .icon { width: 18px; height: 18px; color: var(--sky-500); flex: none; margin-top: .15rem; }
.band__actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* Wörter, einmal beim Laden gesplittet */
.w { display: inline-block; white-space: pre; }

/* Einstiege, gescrubbt über --k (0 bis 1). Nur transform und opacity. */
.band .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 3, 1); opacity: var(--kc); }
.fx-rise .w  { transform: translateY(calc((1 - var(--kc)) * .55em)); }
.fx-drift .w { transform: translateY(calc((1 - var(--kc)) * -.6em)); }
.fx-stage .w { transform: translateY(calc((1 - var(--kc)) * .45em)) scale(calc(.94 + .06 * var(--kc))); }
.band .later  { opacity: clamp(0, (var(--k, 0) - .55) * 3.2, 1); }
.band .latest { opacity: clamp(0, (var(--k, 0) - .75) * 4, 1); transform: translateY(calc((1 - clamp(0, (var(--k, 0) - .75) * 4, 1)) * 10px)); }

/* ---------- Ladering und Scroll-Hinweis ---------- */
.cine__ring {
  position: absolute; right: 1.5rem; bottom: 1.5rem; width: 40px; height: 40px;
  color: var(--on-dark); opacity: 0; transition: opacity .4s var(--ease);
}
.cine.loading .cine__ring { opacity: .85; }
.cine__ring circle { transition: stroke-dashoffset .2s linear; }
.cine__cue {
  position: absolute; left: 50%; bottom: 1.4rem; translate: -50% 0;
  display: none; flex-direction: column; align-items: center; gap: .35rem;
  font: 600 .72rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark); text-shadow: var(--tshadow);
  opacity: var(--cue, 1); pointer-events: none;
}
html[data-hero="video"] .cine__cue { display: flex; }
.cine__cue svg { width: 18px; height: 18px; }

/* ---------- Handy-Sequenz: Text unten, Abschluss oben ---------- */
html[data-hero="seq"] .band, html[data-hero="seq"] .band--settle { left: 1.25rem; right: 1.25rem; width: auto; top: auto; bottom: 1.5rem; translate: none; }
/* Abschluss ebenfalls unten: oben stehen Kopf der Mitarbeiterin und Treppe, unten nur Boden */
html[data-hero="seq"] .band::before {
  inset: -60% -1.25rem -1.5rem;
  background: linear-gradient(to top, rgba(8, 12, 18, .82) 0%, rgba(8, 12, 18, .55) 55%, rgba(8, 12, 18, 0) 100%);
}
html[data-hero="seq"] .band--settle::before { inset: -35% -1.25rem -1.5rem; }
html[data-hero="seq"] .cine__scrim { background: none; }
html[data-hero="seq"] .cine h1, html[data-hero="seq"] .band__title { max-width: none; }
html[data-hero="seq"] .band__sub { font-size: 1rem; }
html[data-hero="seq"] .band__list { gap: .35rem 1rem; font-size: .88rem; margin-top: .9rem; }
html[data-hero="seq"] .band__actions { margin-top: 1rem; }
html[data-hero="seq"] .band__actions .btn { width: 100%; justify-content: center; }

/* ---------- Static: Endbild mit allen Texten, kein Scrollweg ---------- */
html:not([data-hero]) .cine__stage,
html[data-hero="static"] .cine__stage { height: auto; min-height: calc(100svh - var(--header-h)); }
html:not([data-hero]) .band,
html[data-hero="static"] .band {
  --k: 1 !important; opacity: 1 !important; visibility: visible !important;
  position: relative; inset: auto; translate: none; width: auto; max-width: 38rem; left: auto; top: auto;
}
html:not([data-hero]) .cine__bands,
html[data-hero="static"] .cine__bands {
  position: relative; inset: auto;
  display: flex; flex-direction: column; justify-content: center; gap: 2.5rem;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 6rem);
}
html:not([data-hero]) .band::before,
html[data-hero="static"] .band::before { inset: -20% -30%; }

@media (max-width: 560px) {
  .band__list { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .band .btn { min-height: 48px; }
}
@media (max-height: 560px) {
  .cine__cue, .cine__ring { display: none; }
}
@media (max-width: 860px) {
  :root { --bar-h: calc(56px + env(safe-area-inset-bottom)); }
}

/* Sicherheitsnetz: Lädt cinematic.js nicht, bleibt data-hero auf «pending».
   Dann steht die Hauptüberschrift nach 2.5 s trotzdem da. */
@keyframes cine-zeigen { to { opacity: 1; visibility: visible; --k: 1; } }
html[data-hero="pending"] .band[data-first] { animation: cine-zeigen 0s 2.5s forwards; }