/* World scenes at the top of each chapter. Animations run only while .is-live (see scenes.js). */

.chapter:has(> .scene) {
  padding-top: 0;
}

.scene {
  position: relative;
  margin: 0 0 clamp(1.5rem, 1rem + 2vw, 3rem);
  height: clamp(250px, 34vw, 460px);
  overflow: hidden;
}

.scene > svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scene:not(.is-live) *,
.scene:not(.is-live) *::before,
.scene:not(.is-live) *::after {
  animation-play-state: paused !important;
}

/* ---------- Notaufnahme (always night) ---------- */
.scene-er {
  --er-ink: #170d1c;
}

.scene-er .er-stars circle {
  fill: #fff7e0;
  animation: twinkle 3s ease-in-out infinite alternate;
}

.scene-er .er-stars circle:nth-child(even) {
  animation-delay: -1.5s;
}

.scene-er .er-moon {
  fill: #fff1cf;
}

.scene-er .er-far {
  fill: #3a2148;
}

.palm-mini .pm-trunk {
  fill: none;
  stroke: #4a2a4c;
  stroke-width: 12;
  stroke-linecap: round;
}

.palm-mini .pm-leaf {
  fill: #2f5a52;
  stroke: var(--er-ink, #3a1f35);
  stroke-width: 3;
  stroke-linejoin: round;
}

.palm-mini {
  animation: sway-mini 5s var(--ease-soft) infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

@keyframes sway-mini {
  to {
    rotate: 2.5deg;
  }
}

.scene-er .er-facade {
  fill: #5e3d66;
  stroke: var(--er-ink);
  stroke-width: 3;
}

.scene-er .er-facade-shade {
  fill: #4c2f55;
}

.scene-er .er-roof {
  fill: #3a2148;
  stroke: var(--er-ink);
  stroke-width: 3;
}

.scene-er .er-win {
  fill: #ffd36b;
  opacity: 0.85;
}

.scene-er .er-sign-board {
  fill: #2a1530;
  stroke: var(--er-ink);
  stroke-width: 3;
}

.scene-er .er-cross-box {
  fill: #3b1427;
  stroke: #ff4d6d;
  stroke-width: 2;
}

.scene-er .er-cross-plus {
  fill: #ff4d6d;
  filter: drop-shadow(0 0 6px #ff4d6d);
}

.scene-er .er-cross {
  animation: neon-blink 2.6s steps(1, end) infinite;
}

@keyframes neon-blink {
  0%, 100% { opacity: 1; }
  48% { opacity: 1; }
  50% { opacity: 0.25; }
  54% { opacity: 1; }
  56% { opacity: 0.4; }
  58% { opacity: 1; }
}

.scene-er .er-neon {
  fill: #ff9ab4;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: 36px;
  letter-spacing: 2px;
  filter: drop-shadow(0 0 4px #ff6f95) drop-shadow(0 0 14px rgba(255, 111, 149, 0.7));
  animation: neon-hum 4s steps(1, end) infinite;
}

@keyframes neon-hum {
  0%, 100% { opacity: 1; }
  71% { opacity: 1; }
  72% { opacity: 0.6; }
  73% { opacity: 1; }
}

.scene-er .er-door {
  fill: #bfe3f5;
  stroke: var(--er-ink);
  stroke-width: 3;
}

.scene-er .er-door-shine {
  fill: rgba(255, 255, 255, 0.55);
}

.scene-er .er-canopy {
  fill: var(--mustard);
  stroke: var(--er-ink);
  stroke-width: 3;
  stroke-linejoin: round;
}

.scene-er .er-247 {
  fill: #3a1f35;
  font-family: var(--font-pixel);
  font-size: 15px;
  text-anchor: middle;
}

.scene-er .er-sidewalk {
  fill: #4a2f52;
}

.scene-er .er-street {
  fill: #34233f;
}

.scene-er .er-lane {
  stroke: var(--mustard);
  stroke-width: 4;
  stroke-dasharray: 34 22;
  opacity: 0.8;
}

.scene-er .er-pole {
  fill: #22122a;
}

.scene-er .er-lamp-head {
  fill: #ffe9ae;
  stroke: var(--er-ink);
  stroke-width: 3;
}

.scene-er .er-lamp-cone {
  animation: lamp-flicker 6s steps(1, end) infinite;
}

@keyframes lamp-flicker {
  0%, 100% { opacity: 1; }
  33% { opacity: 0.75; }
  34% { opacity: 1; }
  80% { opacity: 0.85; }
}

.scene-er .er-laurin {
  animation: idle-bob 1.2s steps(2, jump-none) infinite;
}

.scene-er .er-amb-body,
.scene-er .er-amb-cab {
  fill: #f3efe6;
  stroke: var(--er-ink);
  stroke-width: 3;
  stroke-linejoin: round;
}

.scene-er .er-amb-glass {
  fill: #bfe3f5;
  stroke: var(--er-ink);
  stroke-width: 2.5;
}

.scene-er .er-amb-stripe {
  fill: var(--pink);
}

.scene-er .er-amb-cross {
  fill: #e0344f;
  stroke: var(--er-ink);
  stroke-width: 2;
}

.scene-er .er-light {
  stroke: var(--er-ink);
  stroke-width: 2.5;
}

.scene-er .er-light-red {
  fill: #ff4d6d;
  animation: light-a 0.9s steps(1, end) infinite;
}

.scene-er .er-light-blue {
  fill: #5ab0ff;
  animation: light-b 0.9s steps(1, end) infinite;
}

@keyframes light-a {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 10px #ff4d6d); }
  50% { opacity: 0.35; filter: none; }
}

@keyframes light-b {
  0%, 100% { opacity: 0.35; filter: none; }
  50% { opacity: 1; filter: drop-shadow(0 0 10px #5ab0ff); }
}

.scene-er .er-wheel {
  fill: var(--er-ink);
}

.scene-er .er-hub {
  fill: #b9b1a6;
}

.scene-er .er-alarm-glow {
  fill: #ff4d6d;
  opacity: 0;
  pointer-events: none;
}

/* SOS pressed: lights go wild, the street glows red, the ambulance trembles. */
.scene-er.alarm .er-light-red,
.scene-er.alarm .er-light-blue {
  animation-duration: 0.22s;
}

.scene-er.alarm .er-alarm-glow {
  animation: alarm-glow 0.44s ease-in-out infinite alternate;
}

@keyframes alarm-glow {
  to {
    opacity: 0.32;
  }
}

.scene-er.alarm .er-ambulance {
  animation: tremble 0.12s linear infinite;
}

@keyframes tremble {
  50% {
    translate: 1px -1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene * {
    animation: none !important;
  }

  .scene-clinic .ecg {
    stroke-dashoffset: 0;
  }
}

.scene-er .er-dark-windows rect {
  fill: #3a2148;
}

.scene-er .er-win-blink {
  fill: #ffd36b;
  animation: win-blink 5s steps(1, end) infinite;
}

@keyframes win-blink {
  0%, 100% { fill: #ffd36b; }
  45% { fill: #3a2148; }
  70% { fill: #ffd36b; }
}

@media (max-width: 640px) {
  .scene {
    height: 290px;
  }
}

/* ---------- shared scene parts (day = golden hour, night = purple night via tokens) ---------- */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sc-ink {
  stroke: var(--line);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sc-sun { fill: var(--sun); }
.sc-far { fill: var(--city-2); opacity: 0.45; }
.sc-walk { fill: var(--hill); }
.sc-street { fill: var(--asphalt); }
.sc-lane { fill: none; stroke: var(--mustard); stroke-width: 4; stroke-dasharray: 34 22; opacity: 0.85; }
.sc-win { fill: var(--window); }
.sc-shadow { fill: rgba(58, 31, 53, 0.25); }

.f-cream { fill: var(--cream); }
.f-mustard { fill: var(--mustard); }
.f-pink { fill: var(--pink); }
.f-mint { fill: var(--mint); }
.f-lilac { fill: var(--lilac); }
.f-clawd { fill: var(--clawd); }
.f-asphalt { fill: var(--asphalt); }
.f-city { fill: var(--city); }
.f-leaf { fill: var(--palm-leaf); }
.f-glass { fill: #bfe3f5; }
.f-dark { fill: #3a1f35; }
.f-white { fill: #fffaf0; }
.f-none { fill: none; }

.sc-text {
  fill: #3a1f35;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  text-anchor: middle;
  stroke: none;
}

.sc-pixel {
  fill: #3a1f35;
  font-family: var(--font-pixel);
  text-anchor: middle;
  stroke: none;
}

.env-body { fill: var(--cream); stroke: #3a1f35; stroke-width: 2.5; }
.env-flap { fill: none; stroke: #3a1f35; stroke-width: 2.5; stroke-linejoin: round; }
.book-cover { stroke: #3a1f35; stroke-width: 2.5; stroke-linejoin: round; }
.book-page { fill: none; stroke: #3a1f35; stroke-width: 2.5; }

/* Buildings dim a little at night; their windows glow instead. */
[data-theme='night'] .scene .dim {
  filter: brightness(0.62) saturate(0.85);
}

.scene .bob {
  animation: idle-bob 1.2s steps(2, jump-none) infinite;
}

.scene .bob-fast {
  animation: idle-bob 0.8s steps(2, jump-none) infinite;
}

.scene .float {
  animation: float 3s ease-in-out infinite alternate;
}

@keyframes float {
  to { transform: translateY(-10px); }
}

.scene .spin-slow {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin360 8s linear infinite;
}

@keyframes spin360 {
  to { rotate: 360deg; }
}

/* ---------- Werkzeug-Garage ---------- */
.scene-garage .garage-door {
  animation: door-roll 7s var(--ease-soft) infinite alternate;
}

.scene-garage .door-right {
  animation-delay: -3.5s;
}

@keyframes door-roll {
  0%, 30% { transform: translateY(0); }
  100% { transform: translateY(-34px); }
}

.scene-garage .code-glyph {
  fill: var(--mint);
  font-family: ui-monospace, monospace;
  font-weight: 700;
  text-anchor: middle;
}

.scene-garage .chat-a,
.scene-garage .chat-b,
.scene-garage .chat-c {
  animation: chat-pop 3.6s steps(1, end) infinite;
}

.scene-garage .chat-b { animation-delay: 0.6s; }
.scene-garage .chat-c { animation-delay: 1.2s; }

@keyframes chat-pop {
  0% { opacity: 0; }
  10%, 85% { opacity: 1; }
  100% { opacity: 0; }
}

.scene-garage .sparks circle {
  fill: #ffe9ae;
  transform-box: fill-box;
  animation: spark 0.7s ease-out infinite;
}

.scene-garage .sparks circle:nth-child(2) { animation-delay: 0.15s; --sx: 14px; }
.scene-garage .sparks circle:nth-child(3) { animation-delay: 0.3s; --sx: -10px; }
.scene-garage .sparks circle:nth-child(4) { animation-delay: 0.45s; --sx: 18px; }
.scene-garage .sparks circle:nth-child(5) { animation-delay: 0.55s; --sx: -16px; }

@keyframes spark {
  from { transform: translate(0, 0); opacity: 1; }
  to { transform: translate(var(--sx, 8px), -26px); opacity: 0; }
}

/* ---------- Regel-Boulevard ---------- */
.scene-boulevard .tl {
  stroke: #170d1c;
  stroke-width: 2;
  opacity: 0.25;
}

.scene-boulevard .tl-red { fill: #ff4d6d; animation: tl-red 9s steps(1, end) infinite; }
.scene-boulevard .tl-yellow { fill: #ffd36b; animation: tl-yellow 9s steps(1, end) infinite; }
.scene-boulevard .tl-green { fill: #5fd38a; animation: tl-green 9s steps(1, end) infinite; }

@keyframes tl-red { 0%, 40% { opacity: 1; } 41%, 100% { opacity: 0.25; } }
@keyframes tl-yellow { 0%, 34% { opacity: 0.25; } 35%, 45% { opacity: 1; } 46%, 88% { opacity: 0.25; } 89%, 100% { opacity: 1; } }
@keyframes tl-green { 0%, 45% { opacity: 0.25; } 46%, 88% { opacity: 1; } 89%, 100% { opacity: 0.25; } }

.scene-boulevard .walk-across {
  animation: stroll 14s linear infinite;
}

@keyframes stroll {
  from { transform: translateX(-60px); }
  to { transform: translateX(1500px); }
}

.scene-boulevard .signs > g:nth-child(odd) circle {
  animation: sign-nod 4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

@keyframes sign-nod {
  0%, 80%, 100% { rotate: 0deg; }
  88% { rotate: -6deg; }
  94% { rotate: 4deg; }
}

/* ---------- Brief-Werkstatt (post office) ---------- */
.scene-post .letter {
  opacity: 0;
  animation: letter-fly 4.5s ease-in-out infinite;
}

.scene-post .l2 { animation-delay: 1.5s; --lx: 60px; --ly: -150px; }
.scene-post .l3 { animation-delay: 3s; --lx: -40px; --ly: -170px; }

@keyframes letter-fly {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  60% { transform: translate(var(--lx, 20px), var(--ly, -130px)) rotate(-12deg); opacity: 1; }
  100% { transform: translate(calc(var(--lx, 20px) * 1.6), calc(var(--ly, -130px) * 1.9)) rotate(10deg); opacity: 0; }
}

/* "Brief kopieren": one letter dives into the mailbox slot. */
.scene-post .letter-copied {
  opacity: 0;
}

.scene-post.mail .letter-copied {
  animation: letter-post 1.1s ease-in-out forwards;
}

@keyframes letter-post {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  55% { transform: translate(60px, -70px) rotate(-14deg); opacity: 1; }
  85% { transform: translate(98px, -26px) rotate(0) scale(0.7); opacity: 1; }
  100% { transform: translate(102px, -22px) scale(0.2); opacity: 0; }
}

.scene-post.mail .mailbox {
  animation: box-gulp 0.4s 0.85s ease-out;
}

@keyframes box-gulp {
  50% { transform: scale(1.06, 0.94); }
}

.scene-post .mailbox {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* ---------- Baustellen-Route ---------- */
.scene-build .scaffold {
  stroke-width: 2.5;
}

.scene-build .crane-jib {
  transform-box: view-box;
  transform-origin: 942px 105px;
  animation: jib-swing 7s ease-in-out infinite alternate;
}

@keyframes jib-swing {
  from { rotate: -1.5deg; }
  to { rotate: 1.5deg; }
}

.scene-build .crane-load {
  animation: float 2.6s ease-in-out infinite alternate;
}

/* ---------- Shopify-Mall ---------- */
.scene-mall .bag-fill {
  fill: #5fb87a;
}

.scene-mall .diy-hut {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: wobble 2.4s ease-in-out infinite;
}

@keyframes wobble {
  0%, 100% { rotate: -1.5deg; }
  50% { rotate: 1.5deg; }
}

.scene-mall .diy-sign {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: sign-sag 5s ease-in-out infinite;
}

@keyframes sign-sag {
  0%, 60% { rotate: -4deg; }
  70% { rotate: 14deg; }
  76% { rotate: 9deg; }
  82%, 100% { rotate: 12deg; }
}

/* A plank keeps falling off. */
.scene-mall .diy-plank {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: plank-fall 5s cubic-bezier(0.55, 0, 0.9, 0.5) infinite;
}

@keyframes plank-fall {
  0%, 55% { transform: translate(0, 0) rotate(0); opacity: 1; }
  80% { transform: translate(18px, 62px) rotate(78deg); opacity: 1; }
  84% { transform: translate(20px, 58px) rotate(84deg); }
  96% { opacity: 1; }
  100% { transform: translate(20px, 60px) rotate(84deg); opacity: 0; }
}

.scene-mall .diy-dust circle {
  fill: color-mix(in srgb, var(--cream) 80%, transparent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: dust 5s ease-out infinite;
}

@keyframes dust {
  0%, 79% { opacity: 0; transform: scale(0.4); }
  84% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6) translateY(-8px); }
}

.scene-mall .door-a { animation: door-a 6s ease-in-out infinite; }
.scene-mall .door-b { animation: door-b 6s ease-in-out infinite; }

@keyframes door-a { 0%, 30%, 80%, 100% { transform: translateX(0); } 45%, 65% { transform: translateX(-62px); } }
@keyframes door-b { 0%, 30%, 80%, 100% { transform: translateX(0); } 45%, 65% { transform: translateX(62px); } }

.scene-mall .cart {
  animation: cart-roll 6s ease-in-out infinite alternate;
}

@keyframes cart-roll {
  to { transform: translateX(46px); }
}

/* ---------- Bibliothek ---------- */
.scene-library .book {
  animation: book-fly 6s ease-in-out infinite alternate;
}

.scene-library .b2 { animation-duration: 7s; animation-delay: -2s; }
.scene-library .b3 { animation-duration: 5s; animation-delay: -1s; }
.scene-library .b4 { animation-duration: 6.5s; animation-delay: -3s; }
.scene-library .b5 { animation-duration: 8s; animation-delay: -4s; }

@keyframes book-fly {
  0% { transform: translate(0, 0) rotate(-6deg); }
  50% { transform: translate(30px, -14px) rotate(8deg) scaleX(0.7); }
  100% { transform: translate(-20px, 10px) rotate(-10deg); }
}

/* ---------- Superkräfte-Labor ---------- */
.scene-lab .lab-neon {
  fill: #9ff0c8;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  text-anchor: middle;
  filter: drop-shadow(0 0 4px #5fd3a0) drop-shadow(0 0 12px rgba(95, 211, 160, 0.7));
  animation: neon-hum 4.5s steps(1, end) infinite;
}

.scene-lab .bolt {
  fill: none;
  stroke: #fff3a6;
  stroke-width: 4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px #ffe96b);
  opacity: 0;
  animation: zap 2.2s steps(1, end) infinite;
}

.scene-lab .bolt-b { animation-delay: 1.1s; }

@keyframes zap {
  0%, 100% { opacity: 0; }
  8% { opacity: 1; }
  14% { opacity: 0; }
  18% { opacity: 1; }
  24% { opacity: 0; }
}

.scene-lab .flask-a { fill: var(--pink); }
.scene-lab .flask-b { fill: var(--mint); }
.scene-lab .flask-c { fill: var(--mustard); }

.scene-lab .bubbles circle {
  fill: var(--cream);
  stroke: var(--line);
  stroke-width: 1.5;
  animation: bubble-up 1.8s ease-in infinite;
}

.scene-lab .bubbles circle:nth-child(2) { animation-delay: 0.4s; }
.scene-lab .bubbles circle:nth-child(3) { animation-delay: 0.8s; }
.scene-lab .bubbles circle:nth-child(4) { animation-delay: 1.1s; }
.scene-lab .bubbles circle:nth-child(5) { animation-delay: 1.4s; }

@keyframes bubble-up {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-46px); opacity: 0; }
}

/* ---------- Praxis Dr. Fehler ---------- */
.scene-clinic .ecg {
  fill: none;
  stroke: #5fd38a;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  filter: drop-shadow(0 0 5px #5fd38a);
  animation: ecg 2.2s linear infinite;
}

@keyframes ecg {
  to { stroke-dashoffset: -260; }
}

.scene-clinic .ecg-bpm {
  fill: #5fd38a;
  animation: neon-blink 1.1s steps(1, end) infinite;
}

.scene-clinic .cross-sign {
  fill: #ff4d6d;
}

.scene-clinic .plaster {
  animation: idle-bob 0.8s steps(2, jump-none) infinite;
}

.scene-lab .goggle {
  fill: rgba(191, 227, 245, 0.55);
}

/* ---------- Buddy-Hangar ---------- */
.scene-hangar .runway {
  fill: none;
  stroke: var(--cream);
  stroke-width: 6;
  stroke-dasharray: 60 40;
  opacity: 0.85;
}

.scene-hangar .hangar-prop rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 0.18s linear infinite;
}

.scene-hangar .hangar-plane {
  animation: float 3.4s ease-in-out infinite alternate;
}

.scene-hangar .sock {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: sock-wave 2.2s ease-in-out infinite alternate;
}

@keyframes sock-wave {
  from { rotate: -8deg; }
  to { rotate: 10deg; }
}

/* ---------- Kiosk ---------- */
.scene-kiosk .bunting-line {
  fill: none;
  stroke: var(--line);
  stroke-width: 2.5;
}

.scene-kiosk .bunting path {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: flag-flap 1.8s ease-in-out infinite alternate;
}

.scene-kiosk .bunting path:nth-child(even) { animation-delay: -0.9s; }

@keyframes flag-flap {
  from { rotate: -7deg; }
  to { rotate: 7deg; }
}

.scene-kiosk .awning {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: awning 3s ease-in-out infinite alternate;
}

@keyframes awning {
  to { transform: scaleY(1.08); }
}

.scene-kiosk .kiosk-box {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: box-hop 3s ease-in-out infinite;
}

@keyframes box-hop {
  0%, 80%, 100% { transform: translateY(0); }
  86% { transform: translateY(-12px) rotate(-4deg); }
  92% { transform: translateY(0) rotate(2deg); }
}

/* Night: the building dims, its windows glow (child brightness offsets the parent filter). */
[data-theme='night'] .scene .dim rect[fill='url(#sc-win)'] {
  filter: brightness(1.7) drop-shadow(0 0 4px rgba(255, 211, 107, 0.6));
}