/* ebenen-fahrt v0.8 — Kulissentheater beim Scrollen, auch als Szenenfolge; Zoomfahrt und Text als Ebene (v0.8).
   Aufbau:  .ebenen-fahrt (lange Strecke)  >  .ef-buehne (steht)  >  [.ef-stapel (Kippen)]  >  [.ef-gang (Auftritt/Abgang)]
            >  .ef-ebene (Fahrt)  >  .ef-leben (Eigenleben)  >  img          — Hüllen in [ ] legt bauteil.js selbst an
   Prinzipien: Ebenen-Illusion/PRINZIPIEN.md — Nummern stehen an den Stellen. */

.ebenen-fahrt {
  position: relative;
  height: var(--ef-strecke, 320vh);            /* Scrollweg der ganzen Szene */
  view-timeline-name: --ef;                      /* P12: der Browser fährt, kein Skript */
}

.ef-buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  contain: paint;
  background: var(--ef-grund, #d8b077);         /* sichtbar nur, solange Bilder laden */
}

/* ---- Kulisse: verschieben, nie drehen (P22). Geometrie setzt bauteil.js ---- */
.ef-ebene {
  position: absolute;
  left: var(--ef-x, 0px);
  top: var(--ef-y, 0px);
  width: var(--ef-b, 100%);
  height: var(--ef-h, 100%);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: var(--ef-ursprung, 50% 50%);   /* Fluchtpunkt der Zoomfahrt (v0.8) */
  animation: var(--ef-bahn, ef-kulisse) 1000ms linear both paused;
}
.ebenen-fahrt.ef-sichtbar .ef-ebene { will-change: transform; }

.ef-ebene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--ef-passung, cover);
  object-position: var(--ef-lage, 50% 50%);
}

@keyframes ef-kulisse {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--ef-dx, 0px), var(--ef-dy, 0px), 0); }
}

/* ---- Eigenleben (P4, P9, P21): innere Hülle, zeitgesteuert, dezent ---- */
.ef-leben {
  width: 100%;
  height: 100%;
  animation: ef-treiben var(--ef-leben-dauer, 48s) ease-in-out infinite alternate;
  animation-play-state: paused;
}
.ebenen-fahrt.ef-sichtbar .ef-leben { animation-play-state: running; }
.ef-leben[data-leben="aus"] { animation: none; }
@keyframes ef-treiben {
  from { transform: translate3d(calc(var(--ef-leben-x, 1.2%) * -1), 0, 0); }
  to   { transform: translate3d(var(--ef-leben-x, 1.2%), var(--ef-leben-y, 0.4%), 0); }
}

/* ---- Dunst als eigene Ebene (P5) ---- */
.ef-dunst {
  background: linear-gradient(to top, transparent 0%, var(--ef-dunst-farbe, rgba(255, 214, 150, .45)) 45%, transparent 90%);
}

/* ---- Text als Ebene (v0.8, MISCHBAU §6): ein Schlagwort steht ZWISCHEN zwei Bildlagen.
   Kein z-index: die Reihenfolge im HTML entscheidet — nach der Szene, vor der Vorderlage. Es fährt nie (P10),
   die Lagen davor und dahinter bewegen sich; so glaubt das Auge den Raum. ---- */
.ef-wort {
  position: absolute;
  pointer-events: none;
  margin: 0;
  white-space: nowrap;
  user-select: none;
}

/* ---- Text auf der Bühne: liegt fest, nie auf einer Kulisse (P10) ---- */
.ef-text {
  position: absolute;
  z-index: 50;
  pointer-events: auto;
}

/* ---- P12: Wo der Browser Scroll-Zeitleisten kann, fährt er selbst ---- */
@supports (animation-timeline: view()) {
  .ebenen-fahrt.ef-css :is(.ef-ebene, .ef-gang, .ef-stapel) {
    animation-duration: auto;
    animation-play-state: running;
    animation-timeline: --ef;
    animation-range: contain 0% contain 100%;
  }
}

/* ---- P15: Handy bekommt weniger Ebenen ---- */
@media (max-width: 700px) {
  .ef-ebene[data-handy="aus"] { display: none; }
}

/* ---- Szenenfolge (v0.3): Hüllen für Auftritt/Abgang und Kippen. Die Keyframes schreibt bauteil.js je Element ---- */
.ef-gang, .ef-stapel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Einzelwerte statt Kurzschrieb: in „animation: none … both“ landet das none bei der Füllart (fill: none),
     dann fällt die Hülle am Ende der Strecke auf unsichtbar zurück */
  animation-duration: 1000ms;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.ef-gang { visibility: hidden; }          /* sichtbar nur im eigenen Bereich (data-von … data-bis) */
.ef-stapel {
  overflow: hidden;
  /* Der Schatten zeigt sich erst, wenn der Stapel beim Kippen kleiner wird (R5/R6); vorher schneidet die Bühne ihn ab */
  box-shadow: 0 2.5vw 5vw rgba(20, 10, 0, .55);
}

/* Schlagschatten je Ebene (P17, R6): auf dem Bild, nicht auf der fahrenden Hülle */
.ef-ebene[data-schatten] img { filter: drop-shadow(var(--ef-schatten, 0 1.2vw 1.4vw rgba(30, 15, 0, .35))); }

/* Blende (Perspektivwechsel, DAUMENKINO): deckt am Höhepunkt den ganzen Schirm, auch hochkant */
.ef-ebene[data-rolle="blende"] {
  left: 50%;
  top: 50%;
  /* Seitenverhältnis = Wolkenbild (≈ 2,4 : 1); der Kern liegt INNERHALB der Wolke, damit beim Ablösen kein
     flacher Streifen unter der Wolke hervorschaut. Kern bis 85 % = 52 vmax Halbhöhe: deckt auch hochkant (50 vmax) */
  width: 300vmax;
  height: 124vmax;
  margin: -62vmax 0 0 -150vmax;
  animation: none;
  background: radial-gradient(closest-side, var(--ef-blende-farbe, #c9ab82) 0 85%, transparent 100%);
}
.ef-ebene[data-rolle="blende"] img { object-fit: fill; }

/* Tafel im Ruhe-Moment (R7): vorderste Ebene, liegt außerhalb der Bahn des Helden */
.ef-tafel {
  position: absolute;
  z-index: 50;
  pointer-events: auto;
}

/* Fester Knopf (R1): Teil der Bühne, bleibt über alle Szenen stehen */
.ef-knopf {
  position: absolute;
  z-index: 60;
  top: calc(env(safe-area-inset-top, 0px) + clamp(12px, 2vw, 28px));
  right: clamp(12px, 2vw, 28px);
  pointer-events: auto;
}

/* ---- P14: Reduzierte Bewegung = das komponierte Standbild ---- */
@media (prefers-reduced-motion: reduce) {
  .ebenen-fahrt:not(.ef-folge) { height: auto; }
  .ebenen-fahrt:not(.ef-folge) .ef-buehne { position: relative; }
  /* Szenenfolge: jede Szene steht still, die Wechsel geschehen ohne Bewegung beim Weiterscrollen */
  .ef-ebene {
    animation: none !important;
    transform: var(--ef-ruhe, translate3d(calc(var(--ef-dx, 0px) * .5), calc(var(--ef-dy, 0px) * .5), 0) scale(var(--ef-sm, 1)));
  }
  .ef-leben { animation: none !important; }
}

/* ---- Freie Kulisse: ein Motiv, das nur einen Teil der Bühne belegt (Wolkenbank, Insel) ---- */
.ef-ebene img[data-frei] {
  position: absolute;
  left: var(--ef-bx, 0%);
  top: var(--ef-by, 0%);
  width: var(--ef-bw, 50%);
  height: auto;
}

/* ---- Darsteller (P3): eigene Bahn, eigene Größe, liegt zwischen zwei Kulissen ---- */
.ef-ebene[data-rolle="darsteller"] {
  left: 0;
  top: 0;
  width: var(--ef-darsteller-b, clamp(220px, 26vw, 760px));
  height: auto;
}
.ef-ebene[data-rolle="darsteller"] img { height: auto; }