/* ── Raumatlas Intro — „Linie. Raum. Gebäude. Atlas." ─────────────
   Scroll-gesteuerte Kamerafahrt. Gilt nur für Seiten mit .scrolly.
   Schärfe: Die Welt ist intern 8× größer angelegt (6560×5120 statt
   820×640), der Scale in intro.js wird durch 8 geteilt. So wird nie
   über Rastergröße hochskaliert — Linien bleiben in der Nahaufnahme
   scharf. Nachbar-Tiles, Geschosse und Chip sind entsprechend mit
   ×8 gegenkorrigiert. Faktor auch in intro.js als K = 8.
   Mobile (≤600px): Welt nur 4× (3280×2560, K = 4 in intro.js) —
   kleinere GPU-Layer gegen Flackern; reicht dort, weil fit < 0.7.
─────────────────────────────────────────────────────────────────── */

.scrolly {
  position: relative;
  height: 650vh; /* v2: +Prolog-Strecke; wird vom Tempo-Tweak überschrieben */
  background: var(--bg);
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh; /* mobile: stabile Höhe trotz ein-/ausfahrender Browser-Leiste */
  overflow: hidden;
}

.persp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
}

/* ── Prolog: „Von Linie zu Haus“ — Punkt → Linie → Haus → Lockup → graue Linie ── */

.prolog {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  will-change: opacity;
}

.prolog svg {
  width: min(1240px, 94vw);
  height: auto;
  overflow: visible;
}

.prolog #pro-zoom { will-change: transform; }

.prolog .pro-line {
  fill: none;
  stroke: var(--text);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--pdraw, 0));
}

.prolog .pro-dot { fill: var(--text); }

.prolog .pro-becomes {
  fill: none;
  stroke: var(--text);
  stroke-width: 8;
  stroke-linecap: round;
  opacity: 0;
}

.prolog .pro-text { opacity: 0; }

.prolog .pro-name {
  font-family: var(--font);
  font-size: 100px;
  font-weight: 500;
  letter-spacing: -0.015em;
  fill: var(--text);
}

.prolog .pro-claim {
  font-family: var(--font);
  font-size: 33px;
  font-weight: 600;
  letter-spacing: 0.26em;
  fill: #8a8a85;
}

html[data-anim="off"] .prolog { display: none; }

@media (prefers-reduced-motion: reduce) {
  .prolog { display: none; }
}

.world {
  position: relative;
  width: 6560px;  /* 820 × 8 */
  height: 5120px; /* 640 × 8 */
  flex-shrink: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.world > .tile {
  position: absolute;
  left: 0;
  top: 0;
  width: 6560px;
  height: 5120px;
}

.tile.center { transform-style: preserve-3d; }

.world > .tile, .floor {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; /* iOS: Flackern bei preserve-3d/rotateX vermeiden */
}

.tile svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Perf: Das Center-Plan-SVG füllte mit voller Box (6560×5120 ≈ 33 MP) die
   ganze Welt — beim Zeichnen des Raum-Umrisses (g2/g3 ändern stroke-dashoffset)
   rasterte der Browser diese 33-MP-Fläche jeden Frame neu → derbes Ruckeln in
   „Linie → Raum". Wir legen das SVG mit halber Backing-Auflösung an (¼ der
   Pixel) und skalieren es per scale(2) auf dieselbe Größe. Im engsten Zoom
   bleibt ~2,8× Oversampling → weiterhin scharf. Floors/Chip (Geschwister)
   bleiben unberührt. */
.tile.center > svg {
  width: 50%;
  height: 50%;
  transform-origin: 0 0;
  transform: scale(2);
  will-change: transform;
}

.tile.nbr {
  /* Nachbarn bleiben 820×640 (werden nur klein gezeigt) und werden per scale(8) in den 8×-Weltraum gehoben */
  width: 820px;
  height: 640px;
  transform-origin: 0 0;
  transform: translate(calc(var(--gx) * 7520px), calc(var(--gy) * 6080px)) scale(8);
  opacity: var(--atlas-o, 0);
}

.tile.nbr svg * { stroke: #dcdad2; }

/* Hauptplan: Liniengruppen, gezeichnet per --draw 0..1 */

.plan-g {
  fill: none;
  stroke: #c6c4b8;
  stroke-width: 1.5;
}

.plan-g line, .plan-g rect, .plan-g path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw, 1));
}

.plan-g .dim { stroke: #e0ded4; }

#intro-room-fill {
  fill: var(--accent);
  fill-opacity: 0;
  stroke: none;
}

/* Geschoss-Kopien für die Axonometrie */

.floor {
  position: absolute;
  left: 0;
  top: 0;
  width: 820px;
  height: 640px;
  transform-origin: 0 0;
  transform: scale(8) translateZ(calc(var(--spread, 0) * 78px));
  opacity: calc(var(--spread, 0) * 0.9);
  pointer-events: none;
}

.floor.f3 { transform: scale(8) translateZ(calc(var(--spread, 0) * 156px)); opacity: calc(var(--spread, 0) * 0.7); }

.floor svg { display: block; width: 100%; height: 100%; }
.floor svg * { fill: none; stroke: #d4d2c6; stroke-width: 1.5; }
.floor .slab { fill: rgba(250, 249, 245, 0.82); stroke: #d4d2c6; }

/* Daten-Chip am Raum (Phase „Raum") */

.intro-chip {
  position: absolute;
  left: 53.7%;
  top: 31%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 64px;
  white-space: nowrap;
  /* Maße ×8 — der Chip lebt im 8×-Weltraum, visuell entspricht das 7px/13px/13px */
  padding: 56px 104px;
  background: var(--bg);
  border: 8px solid var(--hairline);
  border-radius: 999px;
  box-shadow: 0 80px 224px -112px rgba(29, 29, 27, 0.35);
  font-size: 104px;
  color: var(--text-2);
  opacity: 0;
  pointer-events: none;
}

.intro-chip .chip-dot {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ampel-gruen);
}

/* Phasen-Wörter */

.word {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
}

.word .widx {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--eyebrow);
}

.word .wtxt {
  font-size: clamp(72px, 13vw, 176px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}

/* Phasen-Leiste links */

.rail {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 3;
}

.rail span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #d0cec4;
  transition: color 0.4s ease;
}

.rail span.on { color: var(--text); }

/* Finale: Hero-Inhalt über dem ausgegrauten Atlas */

.finale {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  padding: 0 24px;
}

.finale .wordmark { width: min(520px, 78vw); }
.finale .slogan { margin-top: 44px; }
.finale .promise { margin-top: 18px; }
.finale .marquee { margin-top: 56px; }

.scrollhint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  width: 1px;
  height: 44px;
  background: var(--muted);
  transform-origin: top;
}

/* ── Start-Beacon: lädt zum Scrollen ein (nur am Anfang des Prologs) ──
   Overlay über die ganze Bühne; Zentrierung über inset:0 + margin:auto
   bzw. left:0/right:0 — unabhängig vom Containing-Block, kippt nie. */

.startbeacon {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.startpulse {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
}

.startpulse-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--text);
  border-radius: 50%;
}

.startcue {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.startcue-label {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
}

.startcue-line {
  width: 1px;
  height: 38px;
  background: var(--muted);
  transform-origin: top;
}

html[data-anim="off"] .startbeacon { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html[data-anim="on"] .scrollhint { animation: hintGrow 1.8s ease-in-out infinite; }
  html[data-anim="on"] .startcue-line { animation: hintGrow 1.8s ease-in-out infinite; }
  html[data-anim="on"] .startpulse-ring { animation: cuePulse 2.4s ease-out infinite; }
}

@keyframes cuePulse {
  0%   { transform: scale(0.65); opacity: 0.5; }
  70%  { transform: scale(2); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes hintGrow {
  0%   { transform: scaleY(0); }
  55%  { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Animationen aus / reduced motion: statisches Finale */

html[data-anim="off"] .scrolly { height: 100vh !important; height: 100svh !important; }
html[data-anim="off"] .rail, html[data-anim="off"] .word { display: none; }

@media (prefers-reduced-motion: reduce) {
  .scrolly { height: 100vh !important; height: 100svh !important; }
  .rail, .word { display: none; }
  .startpulse, .startcue { display: none; }
}

@media print {
  .scrolly { height: auto; }
  .stage { position: static; height: auto; }
  .rail, .word, .persp, .prolog { display: none; }
  .startpulse, .startcue { display: none; }
  .finale { position: static; opacity: 1 !important; }
}

@media (max-width: 920px) {
  .rail { left: 20px; }
  .word .wtxt { font-size: clamp(56px, 16vw, 120px); }
}

/* ── Mobile (≤ 600px) ──────────────────────────────────────────────
   Die Desktop-Inline-Styles am Slogan/Promise (feste Breiten 500/400px,
   font-size 50px) bleiben auf Desktop unangetastet und werden hier
   gezielt per !important übersteuert, damit nichts überläuft. */
@media (max-width: 600px) {
  .word .wtxt { width: auto !important; max-width: 94vw; }

  .finale { padding: 0 20px; }
  .finale .wordmark { width: min(360px, 82vw); }
  .finale .slogan {
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(34px, 10.5vw, 44px) !important;
  }
  .finale .promise {
    width: auto !important;
    max-width: 100% !important;
    margin-top: 24px !important;
  }
  .finale .marquee { margin-top: 40px; }

  .scrollhint { bottom: 18px; height: 36px; }

  /* Kleinere Welt (K = 4 statt 8) — gleiche Geometrie, halbe Layer-Größe.
     intro.js teilt den Scale auf schmalen Screens ebenfalls durch 4. */
  .world, .world > .tile { width: 3280px; height: 2560px; }
  .tile.nbr {
    width: 820px;
    height: 640px;
    transform: translate(calc(var(--gx) * 3760px), calc(var(--gy) * 3040px)) scale(4);
  }
  .floor { transform: scale(4) translateZ(calc(var(--spread, 0) * 78px)); }
  .floor.f3 { transform: scale(4) translateZ(calc(var(--spread, 0) * 156px)); }

  /* Chip: ×4 statt ×8 — relativ zum Plan etwas größer (lesbar auf kleinem Screen) */
  .intro-chip {
    gap: 36px;
    padding: 32px 56px;
    border-width: 5px;
    font-size: 72px;
    box-shadow: 0 44px 120px -60px rgba(29, 29, 27, 0.35);
  }
  .intro-chip .chip-dot { width: 36px; height: 36px; }
}