/* ==========================================================
   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;
  /* visibility statt nur opacity: eine unsichtbare Flaeche mit opacity 0 wird
     weiterhin gezeichnet und zusammengesetzt. Mit visibility faellt sie ganz
     aus dem Zeichenweg. Der Uebergang bleibt weich, weil visibility erst am
     Ende der Blende umschaltet. */
  visibility:hidden;
  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),
             visibility 1.45s}
/* Nur die sichtbare Flaeche bekommt eine eigene Ebene und die Drift.
   Vorher liefen BEIDE Flaechen dauerhaft, auch auf der Profilseite, wo
   ueberhaupt keine Szene angezeigt wird. */
.scene-frame.on{opacity:1;visibility:visible;
  will-change:opacity,transform;
  animation:sceneDrift 19s ease-in-out infinite alternate}

/* 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%)}

/* Die Stimmung je Bereich steckt jetzt FEST IN DEN BILDERN.
   Vorher lag hier ein CSS-Filter auf einer bildschirmfuellenden Flaeche, die
   sich gleichzeitig dauernd skaliert. Der Filter musste dadurch bei jeder
   Bewegung neu ueber das ganze Bild laufen, und genau dieses Muster hat uns
   beim Randlichtlauf schon einmal 89 Bilder je Sekunde gekostet.
   Werte, die eingerechnet wurden, damit man sie spaeter nachvollziehen kann:
     berserk about  saturate 1.04  contrast 1.04  brightness .96
     berserk games  saturate 1.18  contrast 1.09  brightness .88
     berserk setup  saturate 0.88  contrast 1.13  brightness .82
     vinland about  saturate 1.02  contrast 1.01  brightness .93
     vinland games  saturate 1.15  contrast 1.04  brightness .90
     vinland setup  saturate 0.92  contrast 1.08  brightness .86
   Die unveraenderten Vorlagen liegen unter versions/szenen-original/ . */

/* 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}
}