/* Animierte Szenen (media/szenen/*.svg, eingesetzt von szene_html() in app/render.php)
   Kleine Vektor-Animationen von 5–15 Sekunden, je eine Kernaussage pro Erklärung.
   Farben als Variablen: Nacht (Visionsbild-Stil, leuchtende Linien) und Morgen (Tusche auf Sand).
   Die Szenen laufen nur, solange sie sichtbar sind (assets/js/szenen.js setzt .laeuft),
   und stehen still bei «Bewegung reduzieren». */

.szene {
  --sz-bg1: #1E1726; --sz-bg2: #160F1A; --sz-nebel: #2C2438;
  --sz-hell: #FFF4D8; --sz-dim: #A99F8E;
  --sz-gold: #F7DE44; --sz-feuer: #F7B844; --sz-glut: #F77A44; --sz-rot: #F25C4C;
  --sz-violett: #B98AF7; --sz-blau: #7FA6F7; --sz-gruen: #8BDC6A; --sz-tuerkis: #8AF7C4; --sz-rosa: #F78AC4;
  --sz-weich: .28;
  margin: .2rem 0 1rem; padding: 0;
}
:root[data-licht="morgen"] .szene {
  --sz-bg1: #F6EEDF; --sz-bg2: #ECDFC8; --sz-nebel: #E2D3BA;
  --sz-hell: #3A2B20; --sz-dim: #8C7B66;
  --sz-gold: #B5860F; --sz-feuer: #C0782F; --sz-glut: #B5552E; --sz-rot: #A83A2E;
  --sz-violett: #7A4BB0; --sz-blau: #3F62A8; --sz-gruen: #4E8A34; --sz-tuerkis: #2B8571; --sz-rosa: #B04A82;
  --sz-weich: .2;
}
.szene-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.szene svg {
  display: block; width: 100%; height: auto;
  border-radius: 18px 26px 16px 30px / 24px 18px 28px 16px;
  background:
    radial-gradient(ellipse 60% 70% at 25% 20%, color-mix(in srgb, var(--sz-blau) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 60% at 85% 90%, color-mix(in srgb, var(--sz-rosa) 10%, transparent), transparent 70%),
    linear-gradient(var(--sz-bg1), var(--sz-bg2));
  fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;
  font-family: var(--hand);
}
.szene .glow { filter: url(#sz-glow); }
:root[data-licht="morgen"] .szene .glow { filter: none; }

/* Linienfarben (s-) und Flächen (f-); w = weiche, halbtransparente Fläche */
.szene .s-hell { stroke: var(--sz-hell); } .szene .s-dim { stroke: var(--sz-dim); }
.szene .s-gold { stroke: var(--sz-gold); } .szene .s-feuer { stroke: var(--sz-feuer); }
.szene .s-glut { stroke: var(--sz-glut); } .szene .s-rot { stroke: var(--sz-rot); }
.szene .s-violett { stroke: var(--sz-violett); } .szene .s-blau { stroke: var(--sz-blau); }
.szene .s-gruen { stroke: var(--sz-gruen); } .szene .s-tuerkis { stroke: var(--sz-tuerkis); }
.szene .s-rosa { stroke: var(--sz-rosa); }
.szene .f-hell { fill: var(--sz-hell); } .szene .f-dim { fill: var(--sz-dim); }
.szene .f-gold { fill: var(--sz-gold); } .szene .f-feuer { fill: var(--sz-feuer); }
.szene .f-glut { fill: var(--sz-glut); } .szene .f-rot { fill: var(--sz-rot); }
.szene .f-violett { fill: var(--sz-violett); } .szene .f-blau { fill: var(--sz-blau); }
.szene .f-gruen { fill: var(--sz-gruen); } .szene .f-tuerkis { fill: var(--sz-tuerkis); }
.szene .f-rosa { fill: var(--sz-rosa); }
.szene .f-bg { fill: var(--sz-bg2); } .szene .f-nebel { fill: var(--sz-nebel); }
.szene .w { fill-opacity: var(--sz-weich); }
.szene .d { stroke-dasharray: 2 7; }
.szene text { stroke: none; font-size: 22px; }

/* Bewegungsbausteine, die viele Szenen teilen */
.szene .a-flacker { animation: sz-flacker 1.7s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.szene .a-funkeln { animation: sz-funkeln 3.2s ease-in-out infinite; }
.szene .a-schweben { animation: sz-schweben 5s ease-in-out infinite; }
.szene .a-atmen { animation: sz-atmen 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.szene .a-dreh { animation: sz-dreh 40s linear infinite; transform-box: fill-box; transform-origin: center; }
.szene .a-fluegel { animation: sz-fluegel 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 90%; }
.szene .a-wiegen { animation: sz-wiegen 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.szene .a-fliessen { animation: sz-fliessen 2.4s linear infinite; }
.szene .a-funke { animation: sz-funke 2.6s ease-out infinite; transform-box: fill-box; }
@keyframes sz-flacker { 0%, 100% { transform: scaleY(1) skewX(0); } 30% { transform: scaleY(1.14) skewX(2deg); } 65% { transform: scaleY(.92) skewX(-2deg); } }
@keyframes sz-funkeln { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes sz-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sz-atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes sz-dreh { to { transform: rotate(1turn); } }
@keyframes sz-fluegel { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
@keyframes sz-wiegen { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes sz-fliessen { to { stroke-dashoffset: -18; } }
@keyframes sz-funke { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-46px); opacity: 0; } }

/* Nur sichtbare Szenen bewegen sich */
.szene:not(.laeuft) * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .szene * { animation: none !important; } }
:root[data-licht="morgen"] .szene .sternbild { opacity: .35; }
@media (max-width: 600px) { .szene svg { stroke-width: 2.6; } }