/* IronFit Motion-Lab — Scroll-Reveal "Dose öffnet sich" (v2: Cinematic Frames) */
/* BASE = statisch sicher (reduced-motion / kein JS). RICH = html.motion-ok. */

/* ====================== BASE (safe / static) ====================== */
.reveal {
  position: relative;
  background: #05060a;
}
.reveal-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #05060a;
}

/* ---- Canvas (motion) + Fallback-Bild (statisch). Beide CONTAIN => ganzes Bild sichtbar. ---- */
.reveal-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; display: none; background: #05060a;
}
.reveal-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; object-fit: contain; object-position: center 74%; background: #05060a;
}
html.motion-ok .reveal-canvas   { display: block; }
html.motion-ok .reveal-fallback { display: none; }

/* Dunkler Verlauf unten, damit Text lesbar bleibt */
.reveal-scrim {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(to bottom,
    rgba(5,6,10,0.0) 35%, rgba(5,6,10,0.55) 72%, rgba(5,6,10,0.92) 100%);
  pointer-events: none;
}

/* Text-Zone klar UNTEN (kein Überlapp mit der Dose) */
.reveal-copy {
  position: absolute;
  z-index: 12;
  bottom: clamp(56px, 12vh, 150px);
  left: 0; right: 0;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
}
.reveal-copy .reveal-cta { pointer-events: auto; }

.reveal-eyebrow {
  font-family: var(--font-body, sans-serif);
  letter-spacing: 0.42em; text-transform: uppercase;
  font-size: clamp(11px, 1.4vw, 14px); font-weight: 600;
  color: var(--accent, #FFB347);
  opacity: 1; margin-bottom: 14px;
}
.reveal-title {
  font-family: var(--font-display, Impact), sans-serif;
  font-weight: 400; line-height: 0.92; letter-spacing: 0.01em;
  font-size: clamp(46px, 9vw, 112px);
  color: var(--text-primary, #fff);
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
  margin: 0 0 26px;
  display: flex; gap: 0.28em; justify-content: center; flex-wrap: wrap;
}
.reveal-title .word { display: inline-block; opacity: 1; }
.reveal-title .word.accent {
  color: var(--accent, #FFB347);
  text-shadow: 0 0 28px rgba(255,179,71,0.5);
}
.reveal-cta { display: inline-flex; align-items: center; gap: 8px; opacity: 1; }

/* Vertikaler Scroll-Fortschritt rechts (gold -> violett), zeigt "weiterscrollen". */
.reveal-scroll {
  position: absolute; z-index: 13;
  right: clamp(12px, 3vw, 28px); top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
html.motion-ok .reveal-scroll { display: flex; }
.reveal-scroll-track {
  position: relative; width: 3px; height: clamp(110px, 20vh, 180px);
  border-radius: 999px; background: rgba(255,255,255,0.12); overflow: visible;
}
/* Leucht-Spur von oben bis zum Funken */
.reveal-scroll-trail {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,179,71,0) 0%, var(--accent, #FFB347) 55%, #a855f7 100%);
}
/* Der wandernde Komet-Funke */
.reveal-scroll-spark {
  position: absolute; top: 0%; left: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 2px rgba(255,179,71,0.95), 0 0 18px 5px rgba(168,85,247,0.75);
  animation: revealSparkPulse 1.4s ease-in-out infinite;
}
@keyframes revealSparkPulse {
  0%, 100% { box-shadow: 0 0 6px 2px rgba(255,179,71,0.95), 0 0 16px 4px rgba(168,85,247,0.7); }
  50%      { box-shadow: 0 0 9px 3px rgba(255,179,71,1),    0 0 26px 8px rgba(168,85,247,0.95); }
}
.reveal-scroll-hint {
  font-family: var(--font-body, sans-serif);
  font-size: 9px; letter-spacing: 0.24em; line-height: 1.5;
  text-align: center; color: rgba(255,255,255,0.8); opacity: 0.85;
  animation: revealScrollBounce 1.6s ease-in-out infinite;
}
@keyframes revealScrollBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ====================== RICH (motion erlaubt) ====================== */
html.motion-ok .reveal { height: 440vh; }
html.motion-ok .reveal-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  min-height: 0;
}
/* Text startet unsichtbar, JS enthüllt nach dem Öffnen */
html.motion-ok .reveal-eyebrow      { opacity: 0; }
html.motion-ok .reveal-title .word  { opacity: 0; }
html.motion-ok .reveal-cta          { opacity: 0; }

/* ====================== Mobile ====================== */
@media (max-width: 640px) {
  html.motion-ok .reveal { height: 380vh; }
  .reveal-title { font-size: clamp(40px, 13vw, 76px); }
  .reveal-copy { bottom: clamp(44px, 10vh, 100px); }
}