/* =====================================================================
   INTRO-STAGE (P1 v5, 21.09.2026) — Overlay über der fertig gebauten Startseite
   (js/intro.js, Würfel-Pfad):
   Video (intro-1 v13, endet auf dem stehenden Apex) über Standbild F134,
   darüber die Leerbühnen-Füllung (Deckkraft 0 → 1 in der Drehung). Der
   DOM-Würfel liegt von Anfang an unter dem Video: Front, rechte Seite,
   Deckel = F134-Texturen (assets/face-*.webp), Rückseiten = Klone der
   Startseite; Spiegel-Gruppe mit denselben Flächen. Tausch bei F134 → 180°
   um die Hochachse → Bob → Dreh + Zoom bis die Landefläche exakt der
   Viewport ist → Overlay weg. Regeln (aus P2): keine opacity / filter /
   mix-blend-mode auf dem preserve-3d-Baum, nur auf Blatt-Flächen (.is-face
   ist transform-style: flat, darf Deckkraft tragen); kein will-change:
   transform auf den Klon-Flächen (Chrome soll beim Zoom nachrastern).
   perspective / perspective-origin setzt intro.js je Viewport aus dem
   Kamera-Fit (Brennweite × cover-Faktor).
   ===================================================================== */

.intro-stage {
  position: fixed;
  inset: 0;
  z-index: 150;                 /* über Header (60) und Rail, unter .intro-skip (200, css/hero-video.css) */
  overflow: hidden;
  background: #0b0b0d;
  /* kein preserve-3d hier: der 3D-Kontext ist .is-cube; perspective wirkt auf Kinder auch flach.
     So darf ?fadeout=N eine Deckkraft auf dem Overlay-Root tragen, ohne den 3D-Baum zu berühren. */
}
.intro-stage[hidden] { display: none; }

/* Bühne: Standbild F134 (0, Rückhalt) → Video (5 bis zum Tausch, damit der Würfel darunter schon gerastert ist; danach
   1, hält F134) → Leerbühnen-Füllung (2, Deckkraft aus JS) → Würfel-Wrapper (3/4); alle center/cover wie .hero-video */
.is-still,
.is-fill,
.is-fill2,
.is-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.is-still { z-index: 0; }
.is-fill { opacity: 0; }
.is-video { z-index: 5; }
.is-video.is-under { z-index: 1; }   /* Tausch: unter Füllung (2) und Würfel-Wrapper */
.is-fill { z-index: 2; }
.is-fill2 { z-index: 2; opacity: 0; }
.is-video.is-off { visibility: hidden; }

/* Zwei 2D-Wrapper (perspective), darin je eine 3D-Gruppe: Würfel über dem Boden, Spiegelung darunter. */
.is-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.is-wrap--refl { z-index: 3; }
.is-wrap--cube { z-index: 4; }
/* Würfel-Gruppe: Ursprung 0/0/0 der Bühne, Matrix je Frame aus intro-stage.js */
.is-cube {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 3;
  transform-style: preserve-3d;
  transform-origin: 0 0 0;
  pointer-events: none;
}
.is-face {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0 0;
  transform-style: flat;
  overflow: hidden;
  backface-visibility: hidden;
  background: #0b0b0d;
}
/* Spiegel-Gruppe: Deckkraft (--refl × Blende) liegt auf dem 2D-Wrapper .is-wrap--refl (JS), nicht im 3D-Baum */
.is-wrap--refl { opacity: 0; }
/* Quadratische Rückwand: Klon in Viewport-Größe mittig; Größen setzt JS (S × S, Klon vw × vh) */
.is-square {
  position: absolute;
  left: 0;
  top: 0;
  background: #0b0b0d;
}
/* Apex-Texturen (F134 je Fläche rektifiziert), S × S wie die Rückwand; Größe setzt JS */
.is-tex {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
  user-select: none;
}
.is-clone {
  position: absolute;
  overflow: hidden;
  background: #0b0b0d;
}
/* Der Klon ist Bild, nicht Seite */
.is-clone,
.is-clone * { pointer-events: none !important; }
.is-clone .fp-section {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
}
.is-clone .fp-clip { position: absolute; inset: 0; overflow: hidden; }
/* Fixe UI-Teile der Seite (Header, Rail, Bottom-Bar) sitzen im Klon absolut zum Klon-Viewport */
.is-clone .site-header,
.is-clone .side-rail,
.is-clone .bottom-bar { position: absolute; }
/* Die Startseite unter dem Overlay ist seit dem Start fertig; hbs-Ebenen sichtbar */
.is-clone .hbs-room,
.is-clone .hbs-monument,
.is-clone .hbs-floor i { opacity: 1; visibility: inherit; }


/* Diagnose-Marker (Ecken der Front, für die Messung) */
.is-marker {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}