/* ==========================================================
   Eigene Hintergrundszenen je Bereich + filmischer Themenwechsel.
   Bewusst in einer eigenen Datei, damit sich das getrennt vom Rest
   ein- und ausschalten laesst.
   Grundlage: die Fassung, die ChatGPT auf der Testversion gebaut hat.
   ========================================================== */

/* Die Szene liegt zwischen Hintergrundvideo und dem bestehenden Schleier. */
#sceneBg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.scene-frame{position:absolute;inset:-3%;opacity:0;
  background-image:var(--scene-wide);background-position:center;background-size:cover;
  transform:translate3d(var(--scene-x,0),var(--scene-y,0),0) scale(1.07);
  transition:opacity 1.45s cubic-bezier(.4,0,.2,1),filter 1.45s ease;
  will-change:opacity,transform;
  animation:sceneDrift 19s ease-in-out infinite alternate}
.scene-frame.on{opacity:1}

/* Abdunklung zum Rand hin, damit die Karte lesbar bleibt. */
.scene-frame::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 75% at 50% 42%,transparent 12%,
             rgba(0,0,0,.34) 68%,rgba(0,0,0,.64) 100%)}

/* Jeder Bereich bekommt eine eigene Stimmung. */
body[data-scene="1"] .scene-frame{filter:saturate(1.04) contrast(1.04) brightness(.96)}
body[data-scene="2"] .scene-frame{filter:saturate(1.18) contrast(1.09) brightness(.88)}
body[data-scene="3"] .scene-frame{filter:saturate(.88) contrast(1.13) brightness(.82)}
body[data-theme="vinland"][data-scene="1"] .scene-frame{filter:saturate(1.02) contrast(1.01) brightness(.93)}
body[data-theme="vinland"][data-scene="2"] .scene-frame{filter:saturate(1.15) contrast(1.04) brightness(.90)}
body[data-theme="vinland"][data-scene="3"] .scene-frame{filter:saturate(.92) contrast(1.08) brightness(.86)}

/* scale statt transform, damit die Verschiebung oben erhalten bleibt. */
@keyframes sceneDrift{0%{scale:1}100%{scale:1.025}}

/* Hochformat bekommt den passenden Zuschnitt. */
@media (orientation:portrait){.scene-frame{background-image:var(--scene-tall)}}
/* Auf Touch langsamer treiben lassen, das spart Arbeit. */
@media (pointer:coarse){.scene-frame{animation-duration:28s}}

/* ---------- Kurzer filmischer Themenwechsel ---------- */
/* Vorher lag ein kreisfoermiger Farbverlauf mittig auf dem Bild, das gab
   einen deutlichen Farbfleck in der Mitte. Jetzt bleibt die Mitte frei:
   nur eine dezente Abdunklung zum Rand hin wie im Kino, die Farbe steckt
   ausschliesslich im wandernden Lichtstreifen. */
#themeTransition{position:fixed;inset:0;z-index:49;pointer-events:none;opacity:0;
  background:
    linear-gradient(115deg,transparent 43%,rgba(var(--glow-rgb),.085) 50%,transparent 57%),
    radial-gradient(125% 95% at 50% 50%,transparent 52%,rgba(0,0,0,.26) 100%);
  transition:opacity .34s ease}
/* Der Lichtstreifen ist jetzt der Hauptdarsteller, deshalb etwas praesenter
   und schmaler geschnitten. */
#themeTransition::after{content:"";position:absolute;inset:-25%;
  background:linear-gradient(105deg,transparent 43%,rgba(255,255,255,.22) 50%,transparent 57%);
  transform:translateX(-70%) skewX(-14deg)}
/* Die Unschaerfe ist zurueck, aber als kurzer Stoss statt als Dauerzustand:
   sie steigt schnell an, erreicht nach knapp einem Drittel ihren Hoehepunkt
   und ist nach 0,6 Sekunden wieder weg. Der weisse Strahl laeuft danach
   allein weiter, dadurch bleibt das Bild scharf waehrend er durchzieht. */
#themeTransition.on{opacity:1;animation:themeBlur .6s ease both}
@keyframes themeBlur{
  0%  {backdrop-filter:blur(0)}
  28% {backdrop-filter:blur(2.2px)}
  100%{backdrop-filter:blur(0)}
}
#themeTransition.on::after{animation:themeSweep 1.9s cubic-bezier(.25,.6,.25,1) both}
@keyframes themeSweep{to{transform:translateX(70%) skewX(-14deg)}}

@media (prefers-reduced-motion:reduce){
  .scene-frame,#themeTransition::after{animation:none!important}
}