/* engine.css — Basis-Styles für Scrollytelling-Rooms + Overlays */

:root {
  --ink: #0e0e11;
  --paper: #ffffff;
  --accent: #c8a24b;
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Ein Room ist höher als der Viewport -> Scroll-Strecke zum Scrubben */
.room {
  position: relative;
  height: 300vh; /* via data-/CSS pro Room überschreibbar */
}

/* Der gepinnte Canvas-Container */
.room .seq {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.room .seq canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Text-Overlays liegen über dem gepinnten Frame */
.room .overlay {
  position: sticky;
  top: 0;
  height: 0; /* nimmt keinen Platz, Inhalt wird absolut positioniert */
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s linear;
  pointer-events: none;
}
.room .overlay > * {
  position: fixed;
  left: 8vw;
  bottom: 12vh;
  max-width: 36rem;
  margin: 0;
}
.room .overlay h1,
.room .overlay h2 {
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
}
.room .overlay p {
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  opacity: 0.92;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
}

.overlay[data-align="center"] > * { left: 50%; transform: translateX(-50%); text-align: center; }
.overlay[data-align="right"] > * { left: auto; right: 8vw; text-align: right; }

/* Poster, solange Frames laden */
.room .seq[data-poster] { background-size: cover; background-position: center; }