/* ==========================================================================
   HERO-CINEMA — Scroll-driven Container-Opening + Zoom-into-HTML
   --------------------------------------------------------------------------
   Layer-Stack:
     1. <video>      Cover-Hintergrund waehrend Scrub
     2. <canvas>     Snapshot des Endframes (uebernimmt nahtlos)
     3. <img>        endframe.webp preload-Quelle (display:none)
     4. <div.stage>  Zoom-Stage mit der echten <section.hero>
     5. <div.hint>   Scroll-Hint Affordance
   ========================================================================== */


/* ───── TWEAK ME ↓  (Position der hellen Container-Innenflaeche) ──────────
   Werte in %-vom-sichtbaren-Video-Bereich (nicht vom Viewport!).
   Center-basiert (translate(-50%,-50%)). Live justierbar via ?debug=hero. */
.hero-cinema {
  /* [4k-video] auto-kalibriert aus neuem 2K-Endframe via Luma-Edge-Detection */
  --bright-rect-top:    50%;
  --bright-rect-left:   49.8%;
  --bright-rect-width:  24.5%;
  --bright-rect-height: 33%;

  /* [v2] NEUE 4-PHASEN-TIMING (Scroll-Progress 0..1):
     A: 0 → video1End      — Video 1 scrubt (Tueroeffnung)
     B: video1End → video2End — Video 2 scrubt (Kamera-Zoom-In)
     C: video2End → 1      — HTML-Stage Snap-In Fullscreen */
  --video1-end:     0.50;
  --video2-end:     0.92;
  --html-snap:      0.94;

  /* [v2-late-reveal] HTML-Stage erscheint erst in Phase B sub-progress >= this.
     0..1 (= Phase-B-internal-progress). Frueh = 0.15, spaet = 0.65. */
  --reveal-start:   0.18;

  /* [v2-start-scale] Wie KLEIN die Stage bei Reveal-Start sein soll
     (1.0 = fullscreen, 0.10 = 10% viewport-width). Entkoppelt von bright-rect-*,
     damit Mini-Hero im weissen Rahmen sitzt statt drueber raus. */
  --start-scale:    0.10;

  /* [legacy] alte Vars - behalten fuer Debug-Overlay-Kompatibilitaet */
  --scrub-end:      0.78;
  --handover-end:   0.79;
  --zoom-target:    5;

  /* [fix-8] perf-sprint: Pin-Distance 320vh (von 520vh runter) */
  --pin-distance:   320vh;
}


/* ===== ROOT-CONTAINER =====================================================*/
.hero-cinema {
  position: relative;
  width: 100%;
  height: 100vh;
  /* [pin-fix] Header ist 74px sticky → Hero overlapt mit margin-top, damit
     Container-Video bei scrollY=0 schon voll-bleed (100vh) sichtbar ist und
     Pin sofort engagen kann. Header behaelt z-index:50 → bleibt sichtbar oben. */
  margin: -74px 0 0 0;
  background: #0a0a0a;
  overflow: hidden;
  isolation: isolate;
}

.hero-cinema-pin {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}


/* ===== LAYER 1 — VIDEO (1+2) ==============================================*/
.hc-video, .hc-video2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: opacity;
  background: #0a0a0a;
}
.hc-video  { z-index: 1; }
.hc-video2 { z-index: 2; opacity: 0; }  /* [v2] initial hidden, JS togglet */


/* ===== LAYER 2 — CANVAS SNAPSHOT =========================================*/
.hc-snapshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}


/* ===== LAYER 3 — ENDFRAME PRELOAD SOURCE =================================*/
.hc-endframe-src,
.hc-startframe-src {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}


/* ===== LAYER 4 — ZOOM STAGE (enthaelt echte <section.hero>) ==============
   [arch-fix] Stage ist 100vw x 100vh fixed, transform-origin 0/0.
   JS setzt translate3d + scale so dass Stage initial als bright-rect-positioned
   Mini-Window erscheint. Bei Zoom-Phase lerpt JS zu scale(1) translate(0,0).
   So zoomt eine ECHTE Mini-Hero zu Fullscreen — kein Crop-Window mehr. */
.hc-zoom-stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transform: translate3d(0, 0, 0) scale(0);  /* wird sofort von JS ueberschrieben */
  transform-origin: 0 0;
  opacity: 0;
  z-index: 3;
  /* [colormatch] Stage selbst transparent — der cream-Background wird in einem
     separaten .hc-stage-bg Layer gerendert dessen opacity sich gezielt animieren
     laesst (smooth fade-in waehrend Phase B Reveal → kein harter Rectangle-Edge). */
  background: transparent;
  /* [snap-in] Smoother Snap statt scroll-gradient — 220ms transition macht
     opacity-Spruenge weich, ohne abhaengig vom Scroll-Tempo zu sein. */
  transition: opacity 220ms ease-out;
  /* [fix-3] perf-sprint: will-change nur waehrend aktiver Animation */
  will-change: auto;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  /* [fix-11] perf-sprint: keine Mouse-Events einfangen waehrend Animation */
  pointer-events: none;
}

/* [colormatch] Background-Layer der Stage — opacity wird von JS waehrend Phase B
   Reveal von 0→1 gelerpt damit keine harten Edges sichtbar sind. */
.hc-stage-bg {
  position: absolute;
  inset: 0;
  background: var(--hc-bright-bg, var(--paper, #FAF7F2));
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

/* [v2] GPU-Layer + Pointer-Events nur waehrend Snap-In (Stage sichtbar) */
.hero-cinema[data-state="snap-in"] .hc-zoom-stage {
  will-change: transform, opacity;
  pointer-events: auto;
}

/* Hero in der Stage: 1:1 Stage-Layout, skaliert mit Stage-Transform */
.hc-zoom-stage > .hero {
  position: relative;
  z-index: 1;  /* ueber .hc-stage-bg */
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  /* [fix-13] perf-sprint: isoliere Layout/Paint */
  contain: layout style paint;
  isolation: isolate;
}


/* ===== LAYER 5 — AUTO-PLAY CTA (ersetzt scroll-hint) =====================*/
/* [open-instant] Class-based reveal statt CSS-Animation — verhindert das
   Animation-Restart-Bug das den Button beim Manual-Scroll-Back ~1s blocked. */
.hc-cta-wrap {
  position: absolute;
  bottom: clamp(20px, 5vh, 56px);
  left: 50%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

/* [open-instant] Visible state — JS toggelt nach 400ms Intro-Delay via rAF-Chain */
.hc-cta-wrap.is-ready {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* [L1 robust] Fallback wenn JS NICHT initialized (no-hero-js bleibt drauf) →
   CSS-Animation greift damit Button trotzdem erscheint. */
html.no-hero-js .hc-cta-wrap {
  animation: hc-cta-fallback-in 600ms ease-out 800ms forwards;
}
@keyframes hc-cta-fallback-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* [L2 robust] Reduced-motion → instant statt 300ms transition */
@media (prefers-reduced-motion: reduce) {
  .hc-cta-wrap { transition: none; }
  .hc-cta-wrap.is-ready { opacity: 1; transform: translate(-50%, 0); }
}

/* Button-Override im Hero-Cinema-Kontext */
.hc-cta-open {
  pointer-events: auto;
  font-size: 1.08rem;
  padding: 14px 28px;
  font-weight: 700;
  box-shadow: 0 14px 40px -10px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.25);
}
.hc-cta-open svg {
  width: 14px;
  height: 14px;
}
.hc-cta-open[disabled] {
  opacity: 0.6;
  cursor: progress;
}
/* [taste-polish-2026-06-12] CTA-Affordance: sanftes Pulsen signalisiert
   Interaktivitaet. Pulsiert NUR im Initial-State 'video1' (vor User-Klick).
   Pausiert in allen aktiven Cinema-States — verhindert visuelle Kollision
   mit Hero-Animation. tasteCtaPulse konsistent zu tasteBrandBreath/-FeaturedBorder. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes tasteCtaPulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 14px 40px -10px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.25), 0 0 0 0 rgba(233,102,30,0.5);
    }
    50% {
      transform: scale(1.04);
      box-shadow: 0 16px 44px -8px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.3), 0 0 0 12px rgba(233,102,30,0);
    }
  }
  .hero-cinema[data-state="video1"] .hc-cta-open {
    animation: tasteCtaPulse 2.4s ease-in-out infinite;
  }
}

/* Secondary-Hint unter Button */
.hc-cta-hint {
  color: rgba(255,255,255,0.85);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  animation: hc-cta-hint-bounce 2.2s ease-in-out infinite;
}

/* CTA verschwindet sobald Animation laeuft (state-basiert).
   Specificity (0,2,1) > .is-ready (0,2,0) → ueberschreibt is-ready korrekt. */
.hero-cinema[data-state="video1-active"] .hc-cta-wrap,
.hero-cinema[data-state="video2"]        .hc-cta-wrap,
.hero-cinema[data-state="snap-in"]       .hc-cta-wrap {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
}
@keyframes hc-cta-hint-bounce {
  0%, 100% { transform: translateY(0);  opacity: 0.85; }
  50%      { transform: translateY(3px); opacity: 0.6; }
}


/* ===== LAYER 5b — CLOSE-DOOR CTA (visible nur in snap-in State) ==========*/
.hc-cta-close-wrap {
  position: absolute;
  bottom: clamp(20px, 5vh, 40px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease-out 300ms, transform 350ms ease-out 300ms;
}
.hc-cta-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 20, 20, 0.72);
  color: #fff;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.4);
  transition: background 200ms ease, transform 200ms ease;
}
.hc-cta-close:hover {
  background: rgba(20, 20, 20, 0.88);
  transform: translateY(-1px);
}
.hc-cta-close:active {
  transform: scale(0.97);
}
.hc-cta-close[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.hc-cta-close svg {
  width: 14px;
  height: 14px;
}

/* Visible nur wenn Hero fullscreen erreicht (snap-in state) */
.hero-cinema[data-state="snap-in"] .hc-cta-close-wrap {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Mobile / Static-Fallback: hidden */
@media (max-width: 900px) {
  .hc-cta-close-wrap { display: none; }
}
.hero-cinema[data-state="static"] .hc-cta-close-wrap,
.hero-cinema[data-state="mobile"] .hc-cta-close-wrap,
.hero-cinema[data-state="mobile-v2"] .hc-cta-close-wrap,
.hero-cinema[data-state="mobile-done"] .hc-cta-close-wrap { display: none; }


/* ===== SKIP-LINK (A11y) ==================================================*/
.hc-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 8px 14px;
  background: #fff;
  color: #0a0a0a;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  border-radius: 6px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 200ms ease-out;
}
.hc-skip:focus,
.hc-skip:focus-visible {
  transform: translateY(0);
  outline: 3px solid #ff9b4a;
  outline-offset: 2px;
}


/* ===== CHROMATIC ABERRATION (waehrend Video→Canvas Handover) =============*/
.hero-cinema[data-state="handover"] .hc-snapshot {
  animation: hc-aberration 220ms ease-out forwards;
}
@keyframes hc-aberration {
  0% {
    filter: drop-shadow(2px 0 0 rgba(255, 60, 100, 0.35))
            drop-shadow(-2px 0 0 rgba(60, 200, 255, 0.35));
  }
  100% {
    filter: none;
  }
}


/* ===== BOOT-STATE / NO-JS FALLBACK (kein FOUC) ===========================*/
.no-hero-js .hero-cinema .hc-zoom-stage,
.no-hero-js .hero-cinema .hc-cta-wrap {
  visibility: hidden;
}
.no-hero-js .hero-cinema::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #0a0a0a url("assets/hero/startframe.webp") center / cover no-repeat;
  z-index: 4;
}

/* Static fallback (reduced-motion / reduced-data / video-error) */
.hero-cinema[data-state="static"] {
  height: 100vh;
  background: #0a0a0a url("assets/hero/endframe.webp") center / cover no-repeat;
}
.hero-cinema[data-state="static"] .hc-video,
.hero-cinema[data-state="static"] .hc-snapshot,
.hero-cinema[data-state="static"] .hc-cta-wrap {
  display: none;
}
.hero-cinema[data-state="static"] .hc-zoom-stage {
  position: static;
  width: 100%;
  height: 100%;
  transform: none;
  opacity: 1;
}
.hero-cinema[data-state="static"] .hc-zoom-stage > .hero {
  height: 100%;
}
/* [mobile-bg-fix] Auch Static-Fallback (reduced-motion/data) braucht den
   cream-bg sichtbar — sonst Hero auf dunklem Background. */
.hero-cinema[data-state="static"] .hc-stage-bg {
  opacity: 1;
}


/* ===== MOBILE ============================================================*/
@media (max-width: 900px) {
  .hero-cinema {
    --pin-distance: 0vh;
  }
  .hc-cta-wrap {
    display: none;
  }
  .hc-zoom-stage {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    opacity: 0;
    transition: opacity 600ms ease-out;
    border-radius: 0;
    box-shadow: none;
  }
  .hc-zoom-stage > .hero {
    width: 100%;
  }
  /* [v2] Mobile: Video 1 → Video 2 → HTML sequentiell */
  .hc-video, .hc-video2 {
    transition: opacity 400ms ease-out;
  }
  .hero-cinema[data-state="mobile-v2"]   .hc-video  { opacity: 0; }
  .hero-cinema[data-state="mobile-v2"]   .hc-video2 { opacity: 1; }
  .hero-cinema[data-state="mobile-done"] .hc-video,
  .hero-cinema[data-state="mobile-done"] .hc-video2,
  .hero-cinema[data-state="mobile-done"] .hc-snapshot {
    opacity: 0;
  }
  .hero-cinema[data-state="mobile-done"] .hc-zoom-stage {
    opacity: 1;
  }
  /* [mobile-bg-fix] Stage-Background-Layer auf Mobile mit-faden.
     Desktop setzt .hc-stage-bg via JS in Phase B/C — Mobile hat keinen
     Scroll-Pfad → ohne diese Regel bleibt der cream-bg-Layer bei
     opacity 0 und User sieht Hero auf dunklem #0a0a0a hero-cinema-pin
     Background statt auf cream. */
  .hc-stage-bg {
    transition: opacity 400ms ease-out;
  }
  .hero-cinema[data-state="mobile-done"] .hc-stage-bg {
    opacity: 1;
  }
  /* [P0.1-taste] Mobile-done: Container content-driven height.
     Vorher: hero-cinema=100vh + overflow:hidden → Hero-Content (eyebrow + H1
     + lead + buttons + trust + photo-card ≈ 880px) wurde im 812px Viewport
     ZENTRIERT (align-items:center) → H1 oben aus dem Frame gepusht.
     Jetzt: height=auto, overflow=visible → Content fliesst natuerlich,
     H1 sitzt above-the-fold (siehe hero-grid align-items:start in
     boxpoint-site.css). min-height:100vh damit waehrend Video-Playback
     der schwarze Container-bg auf jeden Fall den ganzen Viewport fuellt. */
  .hero-cinema[data-state="mobile-done"] {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .hero-cinema[data-state="mobile-done"] .hero-cinema-pin {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .hero-cinema[data-state="mobile-done"] .hc-zoom-stage {
    position: relative;
    height: auto;
  }
  .hero-cinema[data-state="mobile-done"] .hc-zoom-stage > .hero {
    height: auto;
  }
}


/* ===== REDUCED MOTION ====================================================*/
@media (prefers-reduced-motion: reduce) {
  .hc-cta-hint { animation: none; }
  .hc-cta-wrap { animation: none; opacity: 1; transform: translateX(-50%); }
}


/* ===== DEBUG OVERLAY (?debug=hero) =======================================*/
.hc-debug-rect {
  position: absolute;
  border: 2px solid #ffd000;
  background: rgba(255, 208, 0, 0.08);
  pointer-events: none;
  z-index: 100;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: #ffd000;
  padding: 4px 6px;
  box-sizing: border-box;
}
.hc-debug-hud {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 999;
  background: rgba(10, 10, 10, 0.94);
  color: #fff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 208, 0, 0.4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  min-width: 260px;
  user-select: none;
}
.hc-debug-hud h4 {
  margin: 0 0 10px;
  color: #ffd000;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hc-debug-row {
  display: grid;
  grid-template-columns: 100px 60px auto;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}
.hc-debug-row label { font-size: 11px; opacity: 0.8; }
.hc-debug-row span  { text-align: right; color: #ffd000; }
.hc-debug-row button {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  margin-left: 2px;
}
.hc-debug-row button:hover { background: rgba(255,208,0,0.2); }
.hc-debug-copy {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: #ffd000;
  color: #0a0a0a;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}


/* [fix-1] perf-sprint: SVG-Motion-Blur komplett entfernt — auf scaled Stage
   (scale=5..7) zwang das den Browser zu massiver Filter-Rasterization.
   Chromatic-Aberration am Handover bleibt (kurze CSS-Anim, kein Scale). */