/* STODA · Hintergründe (Admin → Startseite → Hintergründe). Wird nur geladen, wenn die Seite ein Bild hat.
 *
 * Aufbau:  .bgx (Bühne)  >  .bgx-s (Folie: Ein-/Ausblend-Effekt, Abdunkelung)  >  .bgx-i (Bild: Kamerafahrt)
 * Eine Folie ist sichtbar, wenn sie .on hat. Ohne .on steht sie im Startzustand ihres Effekts (data-fx);
 * der Wechsel dazwischen ist animiert, Ausblenden ist also das Einblenden rückwärts.
 */

.bgx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bgx-s{--fxd:1.8s;position:absolute;inset:0;opacity:0;
  transition:opacity var(--fxd) cubic-bezier(.4,0,.2,1),transform var(--fxd) cubic-bezier(.22,1,.36,1),filter var(--fxd) cubic-bezier(.4,0,.2,1),clip-path var(--fxd) cubic-bezier(.65,0,.35,1);
  will-change:opacity,transform}
.bgx-s[data-sp=slow]{--fxd:2.8s}
.bgx-s[data-sp=fast]{--fxd:1s}
.bgx-s.on{z-index:1;opacity:1;transform:none;filter:none}
/* Bild: etwas größer als die Bühne, damit Zoom und Gleiten nie einen Rand zeigen (die Bühne schneidet ab) */
.bgx-i{position:absolute;inset:-8%;background-size:cover;background-repeat:no-repeat}
/* Abdunkeln (pro Bild einstellbar) plus leichte Vignette, damit Schrift am Rand lesbar bleibt */
.bgx-i::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 35%,rgba(12,15,21,.55) 100%),rgba(12,15,21,var(--dim,.45))}

/* ---------- Effekte: Startzustand (ohne .on) ---------- */
.bgx-s[data-fx=zoom-in]{transform:scale(.87)}                                  /* Heranzoomen */
.bgx-s[data-fx=zoom-out]{transform:scale(1.25)}                                /* Herauszoomen */
.bgx-s[data-fx=rise]{transform:translate3d(0,7%,0)}                            /* von unten aufsteigen */
.bgx-s[data-fx=drift]{transform:translate3d(-7%,0,0)}                          /* seitlich hereingleiten */
.bgx-s[data-fx=blur]{filter:blur(26px) brightness(1.25);transform:scale(1.06)} /* aus dem Nebel */
.bgx-s[data-fx=glow]{filter:brightness(2.4) sepia(.85) saturate(1.7)}          /* Glut */
.bgx-s[data-fx=dark]{filter:brightness(0)}                                     /* aus der Dunkelheit */
/* Vorhang und Kreis: Das Bild ist sofort deckend und wird freigelegt */
.bgx-s[data-fx=curtain]{opacity:1;clip-path:inset(0 50% 0 50%)}
.bgx-s[data-fx=curtain].on{clip-path:inset(0 0 0 0)}
.bgx-s[data-fx=iris]{opacity:1;clip-path:circle(0% at 50% 50%)}
.bgx-s[data-fx=iris].on{clip-path:circle(75% at 50% 50%)}
.bgx-s[data-fx=curtain]:not(.ok),.bgx-s[data-fx=iris]:not(.ok){opacity:0}

/* ---------- Langsame Kamerafahrt (läuft nur, solange die Folie sichtbar ist) ---------- */
.bgx-s.mv .bgx-i{animation:bgx-kb 26s ease-in-out infinite alternate;animation-play-state:paused}
.bgx-s.mv.on .bgx-i{animation-play-state:running}
@keyframes bgx-kb{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1.2%,-1%,0)}}

/* ---------- Startseite: Sektionen ---------- */
.bgx-host{isolation:isolate}
.bgx-sec{z-index:-1;
  /* weich in die Nachbarsektionen auslaufen */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%)}
/* der gemalte Verlauf der Sektion tritt zurück, solange das Bild zu sehen ist */
.bgx-host::before{transition:opacity 1.6s cubic-bezier(.4,0,.2,1)}
.bgx-host.bgx-in.bgx-ok::before{opacity:.25}

/* Startbild: in der vorhandenen Parallaxe-Ebene */
.bgx-hero{z-index:0}

/* ---------- Unterseiten: fester Hintergrund ---------- */
.bgx-page{position:fixed;inset:-4% 0 -4% 0;z-index:-1;opacity:var(--sc,1);transform:translate3d(0,calc(var(--sy,0%) * -1),0);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 50%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 50%,transparent 100%)}
.bgx-page .bgx-i::after{background:linear-gradient(to bottom,rgba(12,15,21,.35) 0,transparent 30%),radial-gradient(ellipse 80% 70% at 50% 40%,transparent 35%,rgba(12,15,21,.6) 100%),rgba(12,15,21,var(--dim,.45))}

/* Wer „Bewegung reduzieren“ eingestellt hat: nur sanftes Überblenden, keine Bewegung */
@media (prefers-reduced-motion: reduce){
  .bgx-s,.bgx-s[data-fx]{transform:none!important;filter:none!important;clip-path:none!important}
  .bgx-s[data-fx=curtain]:not(.on),.bgx-s[data-fx=iris]:not(.on){opacity:0}
  .bgx-s.mv .bgx-i{animation:none}
  .bgx-page{transform:none}
}