/* v2 additive Styles — laedt nach style.css.
   Reveal = full-bleed Hero: gepinnte Animation, Headline-Overlay, Phasen-Captions. */

/* ---- Reveal-Hero: gepinnte Scroll-Strecke ---- */
.reveal-stage {
  position: relative;
  height: 320vh;
  background: #111316;
}

.reveal-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: #111316;
}

#revealCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none; /* JS blendet ein, sobald Frames geladen sind */
  z-index: 0;
}

.reveal-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Scrim: dunkelt unten + links ab, damit Headline lesbar bleibt */
.reveal-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(17,19,22,.45) 0%, rgba(17,19,22,.10) 38%, rgba(17,19,22,.85) 100%),
    linear-gradient(90deg, rgba(17,19,22,.62) 0%, rgba(17,19,22,0) 55%);
}

/* ---- Headline-Overlay (unten links), blendet beim Scrollen aus ---- */
#reveal .hero__inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: var(--pad);
  padding-bottom: clamp(48px, 9vh, 110px);
  will-change: opacity;
}

#reveal h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 7vw, 104px);
  line-height: 1.02;
  margin: 14px 0 0;
  text-shadow: 0 2px 40px rgba(8,9,11,.85);
}

#reveal .lede {
  margin-top: 20px;
  max-width: 42ch;
  font-size: clamp(15px, 1.5vw, 19px);
  color: var(--ink, #F3EFE7);
  text-shadow: 0 1px 24px rgba(8,9,11,.9);
}

/* ---- Phasen-Captions: mittig, blenden synchron zum Aufbau ein ---- */
.reveal-caps {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.reveal-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(54px, 13vh, 130px);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4.6vw, 3.4rem);
  color: #F3EFE7;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}

.reveal-cap.is-on {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Preloader-Balken ---- */
.reveal-load {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  z-index: 4;
  width: 120px;
  height: 2px;
  background: rgba(243,239,231,.18);
  overflow: hidden;
}

.reveal-load span {
  display: block;
  height: 100%;
  width: 0;
  background: #F3EFE7;
  transition: width .2s ease;
}

/* ---- Fallback: reduced-motion (JS setzt .no-scrub) ---- */
.no-scrub .reveal-stage { height: auto; }
.no-scrub .reveal-sticky { position: relative; height: 100vh; height: 100svh; }
.no-scrub #revealCanvas,
.no-scrub .reveal-load { display: none; }
.no-scrub .reveal-caps { display: none; }
.no-scrub .hero__inner { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal-cap { transition: none; }
}

/* Lineup-Karten als Links (Cross-Nav zwischen Produktseiten) */
a.prod { text-decoration: none; color: inherit; }
a.prod:hover .prod__name { text-decoration: underline; text-underline-offset: 3px; }