/*
 * scroll_blocks.css — zentrale, native-first Scroll-Animations-Engine.
 *
 * Deklarativer Vertrag: Markup mit `data-scroll="…"` + den Klassen unten wird
 * von dieser CSS-Datei animiert. Moderne Browser treiben die Animation nativ
 * (scroll-driven animations); ältere bekommen denselben Effekt über das
 * Fallback-Modul static/js/scroll_blocks.js, das die Custom-Property --szo-p
 * setzt. Beide Pfade lesen dieselben transform/opacity-Regeln -> identisches Bild.
 */

/* Animierbare Fortschritts-Property (0 -> 1). Muss registriert sein, damit sie
 * per Keyframe animierbar ist; inherits:true, damit Kinder sie erben. */
@property --szo-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* ---------- Performance: Off-Screen-Sektionen aus dem Rendering halten ---------- */
.scroll-cv {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* ============================================================
 * Block-Typ: Pin + Zoom-Out
 * Sticky-Bühne, deren Motiv beim Scrollen herauszoomt und die
 * Bildunterschrift freigibt.
 * ============================================================ */
.scroll-pinzoom {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}
.scroll-pinzoom__track {
  position: relative;
  height: 300vh; /* Scroll-Dauer der gepinnten Bühne */
}
.scroll-pinzoom__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0b0d10;
}
.scroll-pinzoom__media {
  margin: 0;
  width: 100vw;
  max-width: none;
  aspect-ratio: 16 / 9;
  transform: scale(calc(1.6 - var(--szo-p) * 0.6)); /* 1.6 -> 1.0 = Zoom-Out */
  transform-origin: center center;
  will-change: transform;
}
.scroll-pinzoom__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}
.scroll-pinzoom__copy {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(2rem, 8vh, 6rem);
  margin: 0 auto;
  max-width: 46rem;
  padding-inline: 1.5rem;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  opacity: var(--szo-p); /* 0 -> 1 = Text erscheint beim Herauszoomen */
  transform: translateY(calc((1 - var(--szo-p)) * 24px));
  will-change: opacity, transform;
}
.scroll-pinzoom__copy h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  color: #fff;
}
.scroll-pinzoom__copy p {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: #fff;
}

/* Nativer Pfad: Browser mit scroll-driven animations treiben --szo-p selbst. */
@supports (animation-timeline: view()) {
  @keyframes szo-progress {
    from { --szo-p: 0; }
    to   { --szo-p: 1; }
  }
  .scroll-pinzoom__track {
    animation: szo-progress linear both;
    animation-timeline: view();
    animation-range: contain 0% contain 100%;
  }
}

/* ============================================================
 * Block-Typ: Scroll-Video / Turntable
 * Sticky-Bühne; das Video wird per JS beim Scrollen gespult
 * (scroll_blocks.js). Reines JS, da nativ nicht möglich.
 * ============================================================ */
.scroll-video__track {
  position: relative;
  height: 300vh; /* Scroll-Dauer = Video-Dauer */
}
.scroll-video__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0b0d10;
}
.scroll-video__media {
  width: min(96vw, 1280px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  background: #0b0d10;
}
.scroll-video__copy {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(2rem, 8vh, 6rem);
  margin: 0 auto;
  max-width: 46rem;
  padding-inline: 1.5rem;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.scroll-video__copy h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  color: #fff;
}
.scroll-video__copy p {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: #fff;
}

/* ============================================================
 * Block-Typ: Reveal
 * Inhalte erscheinen ruhig beim Reinscrollen.
 * ============================================================ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
/* Fallback-Zustand (Klasse via IntersectionObserver in scroll_blocks.js) */
.scroll-reveal.is-motion-visible {
  opacity: 1;
  transform: none;
}
/* Nativer Pfad: Reveal direkt über die View-Timeline. */
@supports (animation-timeline: view()) {
  @keyframes szo-reveal {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }
  .scroll-reveal {
    transition: none;
    animation: szo-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}

/* ============================================================
 * Barrierefreiheit: Bewegung reduzieren -> Endzustand statisch.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .scroll-pinzoom__track {
    height: auto;
    animation: none;
  }
  .scroll-pinzoom__stage {
    position: static;
    height: auto;
    min-height: 60vh;
  }
  .scroll-pinzoom__media {
    transform: none;
  }
  .scroll-pinzoom__copy {
    position: static;
    opacity: 1;
    transform: none;
    margin-top: 1.25rem;
    color: #fff;
    text-shadow: none;
  }
  .scroll-reveal {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  /* Scroll-Video: kein Scrubbing, Poster/erstes Bild statisch zeigen. */
  .scroll-video__track {
    height: auto;
  }
  .scroll-video__stage {
    position: static;
    height: auto;
    min-height: 60vh;
  }
  .scroll-video__copy {
    position: static;
    margin-top: 1.25rem;
    color: #fff;
    text-shadow: none;
  }
}

/* ============================================================
 * Responsive: auf kleinen Screens kürzere Pin-Dauer.
 * ============================================================ */
@media (max-width: 640px) {
  .scroll-pinzoom__track,
  .scroll-video__track {
    height: 220vh;
  }
  .scroll-pinzoom__stage {
    background: transparent;
  }
  .scroll-pinzoom__media {
    width: 100vw;
    height: 100svh;
    aspect-ratio: auto;
  }
  .scroll-pinzoom__media img {
    border-radius: 0;
    object-fit: cover;
    object-position: 72% center;
  }
  .scroll-video__media {
    width: 94vw;
  }
}

/* ============================================================
 * Nur Demo-Seite (scroll-demo): leichte Präsentation.
 * ============================================================ */
.scroll-demo-hero,
.scroll-demo-band,
.scroll-demo-outro {
  max-width: 60rem;
  margin-inline: auto;
  padding: clamp(3rem, 12vh, 8rem) 1.5rem;
  text-align: center;
}
.scroll-demo-hero {
  min-height: 70vh;
  display: grid;
  align-content: center;
}
.scroll-demo-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  opacity: 0.7;
  margin: 0 0 0.75rem;
}
.scroll-demo-hero h1 {
  font-size: clamp(2rem, 6vw, 3.6rem);
  margin: 0 0 1rem;
}
.scroll-demo-lead {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  opacity: 0.85;
  margin: 0 auto;
  max-width: 42rem;
}
.scroll-demo-hint {
  margin-top: 2.5rem;
  opacity: 0.6;
}
.scroll-demo-band .scroll-reveal {
  margin-block: clamp(2rem, 8vh, 5rem);
}
.scroll-demo-band h2,
.scroll-demo-outro h2 {
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  margin: 0 0 0.6rem;
}