/*
 * Gemeinsame Bewegungs-Bibliothek für die Arena-Pause vor einem Special (BACKDROP-06, QS-10 bis QS-15).
 * Gilt für Specials mit stageRotation.backdropAnimation = "glut" | "sprint" | "flutlicht" | "blitz" | "konfetti" | "torzaehler".
 * ("krizzeln" liegt in special-titan.css, "radar" in special-libero.css: je eine eigene Handschrift.)
 * Vertrag: docs/special-quality-standard.md. Regeln:
 *  - nur transform, opacity und kleine Filter, kein Layout; keine JavaScript-Timer;
 *  - die Bewegung läuft nur, solange die Arena-Pause sichtbar ist (sonst steht sie hinter den Slides still);
 *  - bei prefers-reduced-motion steht alles still;
 *  - höchstens drei gleichzeitige Dauerbewegungen je Preset (Bild, Schein, Funken/Streifen, Rückennummer).
 */

/* Geteilte Grundlage: Bild und Schein bekommen eine Bewegung, aber erst, wenn die Pause sichtbar ist. */
.stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"]),
.stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"]) *,
.stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"])::before,
.stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"])::after { animation-play-state: paused; }

#frame:has(.arena-svg-scene.is-stage-active) .stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"]),
#frame:has(.arena-svg-scene.is-stage-active) .stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"]) *,
#frame:has(.arena-svg-scene.is-stage-active) .stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"])::before,
#frame:has(.arena-svg-scene.is-stage-active) .stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"])::after { animation-play-state: running; }

/* Die zweite Ebene ("::after") deckt den Hintergrundbereich und trägt die Partikel oder Streifen. */
.stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"])::after {

    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform, opacity;

}

/* Die Glitch-Kopien gehören nur zu "krizzeln"; hier bleiben sie unsichtbar. */
.stage-special-backdrop .stage-special-ghost { opacity: 0; }

/* =====================================================================================================
   glut: Funken und Glut. Das Foto atmet, der rote Schein pocht, Funken steigen auf, die Nummer glimmt.
   Passt zu: Spieler mit Feuer, Kämpfer, Nummer-Würdigungen (Ribéry).
   ===================================================================================================== */

.stage-special-backdrop[data-anim="glut"] > img:not(.stage-special-ghost) { animation: qs-bd-breathe 8s ease-in-out infinite; }
.stage-special-backdrop[data-anim="glut"]::before { animation: qs-bd-ember-pulse 3.4s ease-in-out infinite; }

.stage-special-backdrop[data-anim="glut"]::after {

    height: 200%;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 170, 70, 1) 0 .4vw, rgba(255, 90, 30, .35) .55vw, transparent .95vw),
        radial-gradient(circle at 31% 62%, rgba(255, 100, 40, 1) 0 .55vw, rgba(255, 60, 30, .35) .75vw, transparent 1.2vw),
        radial-gradient(circle at 47% 30%, rgba(255, 220, 130, 1) 0 .3vw, rgba(255, 150, 60, .3) .45vw, transparent .8vw),
        radial-gradient(circle at 58% 84%, rgba(255, 130, 55, 1) 0 .48vw, rgba(255, 70, 30, .35) .68vw, transparent 1.1vw),
        radial-gradient(circle at 70% 12%, rgba(255, 190, 100, 1) 0 .36vw, rgba(255, 110, 40, .3) .5vw, transparent .9vw),
        radial-gradient(circle at 81% 50%, rgba(255, 90, 60, 1) 0 .6vw, rgba(255, 40, 40, .35) .8vw, transparent 1.3vw),
        radial-gradient(circle at 92% 76%, rgba(255, 210, 120, 1) 0 .34vw, rgba(255, 140, 50, .3) .5vw, transparent .85vw),
        radial-gradient(circle at 22% 92%, rgba(255, 120, 55, 1) 0 .44vw, rgba(255, 70, 30, .3) .62vw, transparent 1vw),
        radial-gradient(circle at 64% 46%, rgba(255, 235, 170, 1) 0 .26vw, rgba(255, 160, 70, .3) .4vw, transparent .7vw),
        radial-gradient(circle at 38% 8%, rgba(255, 110, 45, 1) 0 .5vw, rgba(255, 60, 30, .3) .7vw, transparent 1.1vw),
        radial-gradient(circle at 5% 46%, rgba(255, 180, 80, 1) 0 .32vw, rgba(255, 100, 40, .3) .46vw, transparent .8vw),
        radial-gradient(circle at 76% 28%, rgba(255, 100, 50, 1) 0 .42vw, rgba(255, 60, 30, .3) .6vw, transparent 1vw),
        radial-gradient(circle at 52% 70%, rgba(255, 200, 110, 1) 0 .3vw, rgba(255, 130, 50, .3) .44vw, transparent .75vw),
        radial-gradient(circle at 96% 20%, rgba(255, 120, 60, 1) 0 .46vw, rgba(255, 70, 30, .3) .64vw, transparent 1vw);
    background-size: 100% 50%;
    background-repeat: repeat-y;
    mix-blend-mode: screen;
    animation: qs-bd-rise 7s linear infinite;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 78%, transparent 100%);

}

.stage-special-backdrop[data-anim="glut"] .stage-special-watermark-text { animation: qs-bd-glimmer 3.4s ease-in-out infinite; }

@keyframes qs-bd-breathe {

    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }

}

@keyframes qs-bd-ember-pulse {

    0%, 100% { opacity: .35; transform: scale(1); }
    50% { opacity: .95; transform: scale(1.07); }

}

@keyframes qs-bd-rise {

    from { transform: translateY(0); }
    to { transform: translateY(-50%); }

}

@keyframes qs-bd-glimmer {

    0%, 100% { opacity: .85; text-shadow: 0 0 5vw rgba(220, 5, 45, .35); }
    50% { opacity: 1; text-shadow: 0 0 9vw rgba(255, 60, 60, .8); }

}

/* =====================================================================================================
   sprint: Lichtstreifen und Tempo. Das Foto driftet gegen die Laufrichtung, ein heller Streifen zieht
   alle 5 s schräg durchs Bild, Tempolinien rasen vorbei, die Nummer rückt ruckartig nach.
   Passt zu: Flügelspieler, Läufer, Laufwege (Robben, Lahm).
   ===================================================================================================== */

.stage-special-backdrop[data-anim="sprint"] > img:not(.stage-special-ghost) { animation: qs-bd-drift 7s ease-in-out infinite alternate; }

.stage-special-backdrop[data-anim="sprint"]::before { animation: qs-bd-ember-pulse 2.6s ease-in-out infinite; }

.stage-special-backdrop[data-anim="sprint"]::after {

    left: -20%;
    width: 140%;
    background:
        linear-gradient(104deg, transparent 0%, transparent 42%, rgba(255, 255, 255, .55) 48%, rgba(255, 60, 90, .5) 52%, transparent 58%, transparent 100%),
        repeating-linear-gradient(0deg, transparent 0 2.2vw, rgba(255, 255, 255, .22) 2.2vw 2.32vw, transparent 2.32vw 5.4vw);
    background-size: 100% 100%, 100% 100%;
    mix-blend-mode: screen;
    opacity: 0;
    animation: qs-bd-streak 5s cubic-bezier(.5, 0, .2, 1) infinite;
    -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 60%);
    mask-image: linear-gradient(90deg, transparent 20%, #000 60%);

}

.stage-special-backdrop[data-anim="sprint"] .stage-special-watermark-text { animation: qs-bd-nudge 5s steps(1, end) infinite; }

@keyframes qs-bd-drift {

    from { transform: translateX(0) scale(1.02); }
    to { transform: translateX(-1.6vw) scale(1.05); }

}

@keyframes qs-bd-streak {

    0%, 55% { opacity: 0; transform: translateX(-35%); }
    58% { opacity: 1; }
    80% { opacity: .9; }
    90%, 100% { opacity: 0; transform: translateX(35%); }

}

@keyframes qs-bd-nudge {

    0%, 56% { transform: translateX(0); }
    58% { transform: translateX(1.2vw); }
    62% { transform: translateX(.3vw); }
    70%, 100% { transform: translateX(0); }

}

/* =====================================================================================================
   flutlicht: ein Lichtkegel schwenkt über das Bild, das Foto zoomt sehr langsam, Staub im Licht.
   Passt zu: Legenden, Orte, Würdigungen (Hoeneß, Säbener Straße).
   ===================================================================================================== */

.stage-special-backdrop[data-anim="flutlicht"] > img:not(.stage-special-ghost) { animation: qs-bd-zoom 14s ease-in-out infinite alternate; }

.stage-special-backdrop[data-anim="flutlicht"]::before { animation: qs-bd-ember-pulse 6s ease-in-out infinite; }

.stage-special-backdrop[data-anim="flutlicht"]::after {

    left: -10%;
    width: 120%;
    background:
        radial-gradient(ellipse 34% 90% at 50% -8%, rgba(255, 255, 255, .5), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 70%);
    background-size: 60% 100%, 60% 100%;
    background-repeat: no-repeat;
    background-position: 20% 0, 20% 0;
    mix-blend-mode: screen;
    opacity: .75;
    transform-origin: 50% -10%;
    animation: qs-bd-sweep 9s ease-in-out infinite alternate;
    -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 55%);
    mask-image: linear-gradient(90deg, transparent 10%, #000 55%);

}

.stage-special-backdrop[data-anim="flutlicht"] .stage-special-watermark-text { animation: qs-bd-glimmer 7s ease-in-out infinite; }

@keyframes qs-bd-zoom {

    from { transform: scale(1); }
    to { transform: scale(1.07); }

}

@keyframes qs-bd-sweep {

    from { transform: translateX(-12%) rotate(-7deg); opacity: .5; }
    to { transform: translateX(22%) rotate(6deg); opacity: .9; }

}

/* =====================================================================================================
   blitz: Kamerablitze. In unregelmäßigen Abständen blitzt das Bild weiß auf, dazwischen zittert es kaum.
   Passt zu: Fouls, Karten, Schlagzeilen, Boulevard (van Bommel).
   ===================================================================================================== */

.stage-special-backdrop[data-anim="blitz"] > img:not(.stage-special-ghost) { animation: qs-bd-flashfoto 6.4s steps(1, end) infinite; }
.stage-special-backdrop[data-anim="blitz"]::before { animation: qs-bd-ember-pulse 3s ease-in-out infinite; }

.stage-special-backdrop[data-anim="blitz"]::after {

    background:
        radial-gradient(circle at 78% 40%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .0) 38%),
        linear-gradient(0deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .45));
    mix-blend-mode: screen;
    opacity: 0;
    animation: qs-bd-flash 6.4s steps(1, end) infinite;

}

.stage-special-backdrop[data-anim="blitz"] .stage-special-watermark-text { animation: qs-bd-flicker 6.4s steps(1, end) infinite; }

@keyframes qs-bd-flash {

    0%, 14% { opacity: 0; }
    15% { opacity: .85; }
    17% { opacity: .1; }
    18% { opacity: .55; }
    21%, 52% { opacity: 0; }
    53% { opacity: .95; }
    55% { opacity: 0; }
    56% { opacity: .4; }
    59%, 100% { opacity: 0; }

}

@keyframes qs-bd-flashfoto {

    0%, 14% { transform: none; }
    15% { transform: translate(.3vw, -.2vw) scale(1.01); }
    21%, 52% { transform: none; }
    53% { transform: translate(-.3vw, .2vw) scale(1.012); }
    59%, 100% { transform: none; }

}

@keyframes qs-bd-flicker {

    0%, 14% { opacity: 1; }
    15% { opacity: .35; }
    17% { opacity: 1; }
    52% { opacity: 1; }
    53% { opacity: .3; }
    55% { opacity: 1; }
    100% { opacity: 1; }

}

/* =====================================================================================================
   konfetti: Papierschnipsel in Vereinsfarben fallen durchs Bild, das Foto wippt leicht (Pop-Familie).
   Passt zu: laute, fröhliche Würdigungen (Müller).
   ===================================================================================================== */

.stage-special-backdrop[data-anim="konfetti"] > img:not(.stage-special-ghost) { animation: qs-bd-bob 3.2s ease-in-out infinite alternate; }
.stage-special-backdrop[data-anim="konfetti"]::before { animation: qs-bd-ember-pulse 4s ease-in-out infinite; }

.stage-special-backdrop[data-anim="konfetti"]::after {

    top: -100%;
    height: 200%;
    background-image:
        linear-gradient(35deg, #ffd400 0 50%, transparent 50%),
        linear-gradient(-20deg, #dc052d 0 50%, transparent 50%),
        linear-gradient(60deg, #ffffff 0 50%, transparent 50%),
        linear-gradient(10deg, #ffd400 0 50%, transparent 50%),
        linear-gradient(-50deg, #dc052d 0 50%, transparent 50%),
        linear-gradient(25deg, #ffffff 0 50%, transparent 50%),
        linear-gradient(-35deg, #ffd400 0 50%, transparent 50%),
        linear-gradient(45deg, #dc052d 0 50%, transparent 50%);
    background-size: 3.6vw 2.2vw, 2.6vw 3.6vw, 3.4vw 2vw, 2.2vw 3.4vw, 4vw 2.4vw, 2.4vw 4vw, 3.4vw 2.4vw, 2.8vw 3.2vw;
    background-position: 8% 6%, 24% 31%, 40% 14%, 55% 52%, 70% 24%, 84% 68%, 92% 40%, 16% 80%;
    background-repeat: no-repeat;
    opacity: .9;
    animation: qs-bd-fall 7s linear infinite;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);

}

.stage-special-backdrop[data-anim="konfetti"] .stage-special-watermark-text { animation: qs-bd-bob 2.4s ease-in-out infinite alternate; }

@keyframes qs-bd-bob {

    from { transform: translateY(0) rotate(-.4deg); }
    to { transform: translateY(-.8vw) rotate(.5deg); }

}

@keyframes qs-bd-fall {

    from { transform: translateY(0); }
    to { transform: translateY(50%); }

}

/* =====================================================================================================
   torzaehler: LED-Torzähler und Tornetz. Eine rote Zahl zählt in Stufen von 0 auf 41 hoch, hält, blitzt auf und
   beginnt von vorn; ein rotes Netz zieht langsam durchs Bild, das Foto zoomt leicht, der Schein pocht.
   Passt zu: Torjäger, Rekorde, Zahlen (Lewandowski).
   ===================================================================================================== */

@property --qs-tz {

    syntax: "<integer>";
    inherits: false;
    initial-value: 0;

}

.stage-special-backdrop[data-anim="torzaehler"] > img:not(.stage-special-ghost) { animation: qs-bd-zoom 12s ease-in-out infinite alternate; }
.stage-special-backdrop[data-anim="torzaehler"]::before { animation: qs-bd-ember-pulse 2.8s ease-in-out infinite; }

.stage-special-backdrop[data-anim="torzaehler"]::after {

    right: 0;
    left: auto;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 2.4vw 5vw 0;
    box-sizing: border-box;
    counter-reset: qs-tz var(--qs-tz);
    content: counter(qs-tz);
    color: #ff3b3b;
    font-family: var(--font-display);
    font-size: 15vw;
    font-weight: 900;
    line-height: .8;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 2.4vw rgba(255, 40, 60, .85), .5vw .5vw 0 rgba(0, 0, 0, .55);
    background:
        repeating-linear-gradient(45deg, rgba(255, 70, 100, .16) 0 .12vw, transparent .12vw 2.2vw),
        repeating-linear-gradient(-45deg, rgba(255, 70, 100, .16) 0 .12vw, transparent .12vw 2.2vw);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%);
    animation: qs-bd-count 9s steps(41, end) infinite, qs-bd-netshift 14s linear infinite;

}

@keyframes qs-bd-count {

    0% { --qs-tz: 0; opacity: .8; }
    66% { --qs-tz: 41; opacity: .8; }
    72% { opacity: 1; }
    76% { opacity: .55; }
    80%, 94% { --qs-tz: 41; opacity: 1; }
    100% { --qs-tz: 41; opacity: .8; }

}

@keyframes qs-bd-netshift {

    from { transform: translate(0, 0); }
    to { transform: translate(-2.2vw, 1.1vw); }

}

@keyframes qs-bd-zoom {

    from { transform: scale(1); }
    to { transform: scale(1.06); }

}

/* ---------- Ruhige Variante: bei reduzierter Bewegung steht alles still ---------- */

@media (prefers-reduced-motion: reduce) {

    .stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"]),
    .stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"]) *,
    .stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"])::before,
    .stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"])::after { animation: none !important; }

    .stage-special-backdrop:is([data-anim="glut"], [data-anim="sprint"], [data-anim="flutlicht"], [data-anim="blitz"], [data-anim="konfetti"], [data-anim="torzaehler"])::after { display: none; }

}