/* ==========================================================================
   Arvenna, Szenenanimation (story.html)
   Eigene Datei, damit main.css von einer reinen Schauseite frei bleibt.
   Der Fortschritt je Szene kommt als --p (0 bis 1) aus story.js.
   ========================================================================== */

.story-body { background: var(--paper); }

.story-header { position: sticky; top: 0; z-index: 40; }

/* --- Auftakt ------------------------------------------------------------- */

.story-intro { padding-block: clamp(4rem, 3rem + 6vw, 9rem) clamp(2rem, 1.5rem + 3vw, 4rem); }
.story-intro h1 { font-size: var(--step-h2); margin: 0.4rem 0 1rem; max-width: 20ch; }
.story-intro .lead { max-width: 46rem; }
.story-hint { display: flex; align-items: center; gap: 0.7rem; margin-top: 2.5rem; font-size: var(--step-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.story-hint i { display: block; width: 1px; height: 2.5rem; background: linear-gradient(var(--line-strong), transparent); }

/* --- Szenen -------------------------------------------------------------- */

/* Jede Szene bekommt Scrollweg, die Bühne darin bleibt stehen. 220vh geben
   genug Weg für eine ruhige Bewegung, ohne dass das Scrollen zäh wirkt. */
.szene { position: relative; height: 220vh; }
.szene-buehne {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  grid-template-columns: 1fr;
  padding: max(5rem, 12vh) clamp(1.25rem, 5vw, 4rem) 4rem;
}

@media (min-width: 860px) {
  .szene-buehne { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.szene-buehne--mitte { grid-template-columns: 1fr; justify-items: center; text-align: center; }

.szene-bild { position: relative; }
.szene-bild svg { width: 100%; height: auto; display: block; color: var(--ink); }

.szene-text { max-width: 34rem; }
.szene-nr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--step-micro); color: var(--line-strong); letter-spacing: 0.2em; }
.szene-branche { font-size: var(--step-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-top: 0.35rem; }
.szene-text h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); line-height: 1.15; margin: 0.6rem 0 0.9rem; }
.szene-text p { color: var(--ink-soft); font-size: var(--step-small); line-height: 1.72; }

.szene-punkte { list-style: none; display: grid; gap: 0.55rem; margin-top: 1.4rem; }
.szene-punkte li { position: relative; padding-left: 1.4rem; font-size: var(--step-small); color: var(--ink-soft); }
.szene-punkte li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Die Punkte kommen nacheinander, gesteuert über --sichtbar aus dem Script. */
.js .szene-punkte li[data-punkt] { opacity: 0; transform: translateY(10px); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
.js .szene-punkte li[data-punkt].ist-da { opacity: 1; transform: none; }

/* --- 1 Blumen ------------------------------------------------------------ */

.karte .weg { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.karte .ort circle { fill: var(--ink); }
.karte .ort text { fill: var(--muted); font-size: 13px; text-anchor: middle; }
.karte .ort--ziel circle { fill: var(--accent); }
.karte .ort--ziel text { fill: var(--ink); font-weight: 600; }
.karte .fracht { fill: var(--accent); opacity: 0; }

/* --- 2 Mode -------------------------------------------------------------- */

.mode .stange { stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.mode .buegel { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.mode .stueck { fill: var(--accent); opacity: 0; transform-origin: 300px 134px; }
.mode .pflege-marke { opacity: 0; }
.mode .pflege-marke circle { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.mode .pflege-marke text { fill: var(--ink); font-size: 15px; text-anchor: middle; font-weight: 600; }

/* --- 3 Bau --------------------------------------------------------------- */

.bau .boden { stroke: var(--line-strong); stroke-width: 2; }
.bau .geschosse > * { fill: var(--surface); stroke: var(--ink); stroke-width: 2; opacity: 0; }
.bau .bau-marken text { fill: var(--muted); font-size: 13px; opacity: 0; }
.bau .uebergabe { opacity: 0; }
.bau .uebergabe rect { fill: var(--accent); }
.bau .uebergabe text { fill: #fff; font-size: 14px; font-weight: 600; text-anchor: middle; }

/* --- 4 Fertigung --------------------------------------------------------- */

.cnc .spindel rect { fill: var(--ink); }
.cnc .spindel path { stroke: var(--ink); stroke-width: 3; }
.cnc .roh { fill: var(--surface-alt); stroke: var(--line-strong); stroke-width: 2; }
.cnc .fertig { fill: var(--accent); stroke: none; }
.cnc .tisch { stroke: var(--line-strong); stroke-width: 3; }
.cnc .mass { opacity: 0; }
.cnc .mass path { stroke: var(--ink); stroke-width: 1.5; }
.cnc .mass-wert { fill: var(--ink); font-size: 18px; font-weight: 700; text-anchor: middle; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --- 5 Abbinder ---------------------------------------------------------- */

.szene--final { height: 160vh; }
.final-inhalt { max-width: 44rem; }
/* Startwert schon im CSS, sonst springt der Block beim ersten Scrollschritt
   von voll sichtbar auf den vom Script gesetzten Anfangswert zurück. */
.js .final-inhalt { opacity: 0.25; transform: translateY(18px); }
.final-mark { width: clamp(3.5rem, 6vw, 5rem); height: auto; color: var(--accent); margin: 0 auto 1.5rem; display: block; }
.final-inhalt h2 { font-size: var(--step-h2); margin: 0.5rem 0 1rem; }
.final-inhalt .lead { color: var(--ink-soft); }
.final-aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; }

/* --- Ohne Bewegung ------------------------------------------------------- */

/* Wer reduzierte Bewegung eingestellt hat, bekommt die Endbilder ohne Scrollweg.
   Das Script rührt die Elemente dann gar nicht erst an. */
@media (prefers-reduced-motion: reduce) {
  .szene { height: auto; }
  .szene-buehne { position: static; min-height: 0; padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
  .karte .fracht { display: none; }
  .mode .stueck,
  .mode .pflege-marke,
  .bau .geschosse > *,
  .bau .bau-marken text,
  .bau .uebergabe,
  .cnc .mass { opacity: 1; }
  .js .szene-punkte li[data-punkt] { opacity: 1; transform: none; }
  .js .final-inhalt { opacity: 1; transform: none; }
}