/**
 * Level 7 — Scroll-Bowling 3D Scrollytelling (PoC)
 *
 * Styling NUR über bestehende :root-Variablen aus main.css. Sticky-Scrolly:
 * hoher Wrapper (~300vh) liefert die Strecke, die Bühne (sticky, 100dvh)
 * hält Canvas + Typo-Beats. Viewport-Höhe als Kaskade vh → svh → dvh.
 */

/* ---- Wrapper = Scroll-Strecke ---- */
.l7-strike {
  position: relative;
  background: var(--l7-black);
  color: var(--l7-white);
  overflow: clip;

  min-height: 300vh;  /* Fallback */
  min-height: 300svh;
  min-height: 300dvh;
}

/* ---- Bühne = sticky „Bildschirm" ---- */
.l7-strike__stage {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  overflow: hidden;

  height: 100vh;  /* Fallback */
  height: 100svh;
  height: 100dvh;
}

/* ---- WebGL-Canvas: transparent, füllt die Bühne ---- */
.l7-strike__scene {
  position: absolute;
  inset: 0;
  z-index: 2; /* über dem Pattern (z-index 1) */
}
.l7-strike__scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Typo-Beats: gestapelt, überblenden per GSAP ---- */
.l7-strike__beats {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0 24px;
  pointer-events: none;
}
.l7-strike__beat {
  grid-area: 1 / 1;            /* alle Beats stapeln sich übereinander */
  text-align: center;
  will-change: transform, opacity;
}
.l7-strike__beat-title {
  margin: 0;
  color: var(--l7-white);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(48px, 12vw, 168px);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55); /* Lesbarkeit über der 3D-Szene */
}

/* Countdown als 3. Beat (Finale) — nutzt das bestehende .l7-countdown-Styling */
.l7-strike__beat--countdown {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  pointer-events: auto; /* Button klickbar (Beat ist via autoAlpha sonst unsichtbar) */
}
.l7-strike__cd-eyebrow { margin: 0; }
.l7-strike__cd-headline {
  margin: 0;
  color: var(--l7-white);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(28px, 5.5vw, 72px);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}
.l7-strike__beat--countdown .l7-countdown {
  justify-content: center;
  filter: drop-shadow(0 2px 30px rgba(0, 0, 0, 0.55));
}
.l7-strike__cd-cta { margin-top: 6px; }

/* ---- Dekoratives Label ---- */
.l7-strike__label {
  position: absolute;
  top: 32px;
  left: 24px;
  margin: 0;
  z-index: 4;
}

/* ---- CC-BY-Credits: dezent, klein, geringe Deckkraft ---- */
.l7-strike__credits {
  position: absolute;
  right: 24px;
  bottom: 20px;
  margin: 0;
  z-index: 4;
  max-width: 60%;
  text-align: right;
  font-size: 11px;
  line-height: 1.5;
  color: var(--l7-white);
  opacity: 0.32;
  transition: opacity 0.2s;
}
.l7-strike__credits:hover { opacity: 0.7; }
.l7-strike__credits a { color: var(--l7-teal); text-decoration: none; border-bottom: 1px solid transparent; }
.l7-strike__credits a:hover { border-bottom-color: var(--l7-teal); }

/* ---- Mobile ---- */
@media ( max-width: 1023px ) {
  .l7-strike__credits { right: 16px; bottom: 16px; max-width: 80%; font-size: 10px; }
}

/* =====================================================
   Modus B — 3D im Hero-Hintergrund
   ===================================================== */
.l7-hero--bowling { position: relative; overflow: hidden; }
.l7-hero__scene {
  position: absolute;
  inset: 0;
  z-index: 1;          /* über dem Pattern, unter dem Inhalt (.l7-hero__inner: z-index 2) */
  pointer-events: none; /* Hero-Buttons bleiben klickbar */
}
.l7-hero__scene canvas { display: block; width: 100%; height: 100%; }
/* Lesbarkeits-Overlay: links (wo der Text sitzt) dunkler, rechts lässt es die Szene durch */
.l7-hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 90deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.55) 45%, rgba(10,10,10,0.15) 100% );
  pointer-events: none;
}
@media ( max-width: 1023px ) {
  /* Hochkant: Text steht oben → Verlauf von oben dunkel */
  .l7-hero__scene::after {
    background: linear-gradient( 180deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.5) 55%, rgba(10,10,10,0.2) 100% );
  }
}

/* ---- PoC-Hilfslayout (nur Test-Seite) ---- */
.l7-poc-pad {
  min-height: 80vh;
  min-height: 80dvh;
  display: flex;
  align-items: center;
}