/**
 * Saisonebene für Halloween (QtSeason::layerHtml, templates/footer.php).
 *
 * Freigegebene Vorschau vom 05.10.2026: die gemalte Halloween-Nacht liegt sehr
 * leise hinter der ganzen Seite, dazu Mond- und Kürbislicht, zwei Nebel und
 * Funken. Keine Aufkleber am Rand. Die Ebene liegt mit z-index -1 unter allen
 * Inhalten, fängt keine Klicks ab und ist für Screenreader unsichtbar.
 *
 * Eine einzelne Fledermaus fliegt in einer eigenen Ebene (.qt-hw-batlayer) über
 * dem Inhalt (main hat z-index 50), aber unter der Kopfzeile (z-index 9990). Der
 * Flügelschlag kommt aus 16 Einzelbildern (bat-fly.webp, steps), der Flug über
 * den Himmel aus einer zweiten, langsamen Bewegung.
 *
 * Szene und Fledermaus gibt es nur auf QuizTreff selbst (data-theme). Der
 * PubQuiz Hub hat helle Seiten, dort bleiben Nebel und Funken.
 */

.qt-season-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* Die Nacht läuft hinter der ganzen Seite weiter, sehr leise */
.qt-hw-scene {
    display: none;
    position: absolute;
    inset: -4%;
    background: url("../../assets/seasons/halloween/v2/night-960.webp") 62% 12% / cover no-repeat;
    opacity: 0.16;
    filter: blur(3px) saturate(0.9);
}

html[data-theme="halloween"] .qt-hw-scene { display: block; }

@media (min-width: 1200px) {
    .qt-hw-scene { background-image: url("../../assets/seasons/halloween/v2/night-1920.webp"); }
}

.qt-hw-light {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 520px at 82% 6%, rgba(184, 204, 255, 0.10), transparent 70%),
        radial-gradient(800px 520px at 6% 100%, rgba(255, 138, 42, 0.10), transparent 70%);
}

html[data-theme="halloween"] .qt-hw-light {
    background:
        radial-gradient(700px 520px at 82% 6%, rgba(184, 204, 255, 0.10), transparent 70%),
        radial-gradient(800px 520px at 6% 100%, rgba(255, 138, 42, 0.10), transparent 70%),
        radial-gradient(900px 700px at 50% 50%, rgba(10, 8, 20, 0.55), transparent 75%);
}

/* Vignette */
html[data-theme="halloween"] .qt-hw::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

.qt-hw-fog {
    position: absolute;
    left: -20%;
    right: -20%;
    height: 46vh;
    bottom: -8vh;
    opacity: 0.75;
    background:
        radial-gradient(35% 55% at 20% 70%, rgba(150, 130, 210, 0.16), transparent 70%),
        radial-gradient(40% 60% at 55% 80%, rgba(130, 115, 200, 0.14), transparent 70%),
        radial-gradient(30% 50% at 85% 70%, rgba(160, 140, 220, 0.13), transparent 70%);
    filter: blur(14px);
    animation: qt-hw-fog 46s ease-in-out infinite alternate;
}

.qt-hw-fog2 {
    bottom: -14vh;
    height: 36vh;
    opacity: 0.55;
    animation-duration: 62s;
    animation-direction: alternate-reverse;
}

@keyframes qt-hw-fog {
    from { transform: translateX(-4%); }
    to { transform: translateX(4%); }
}

/* Schwebende Funken */
.qt-hw-motes span {
    position: absolute;
    bottom: -10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 196, 120, 0.95), rgba(255, 140, 60, 0) 70%);
    opacity: 0;
    animation: qt-hw-mote 18s linear infinite;
}

.qt-hw-motes span:nth-child(1) { left: 6%; }
.qt-hw-motes span:nth-child(2) { left: 14%; animation-delay: 4s; }
.qt-hw-motes span:nth-child(3) { left: 22%; animation-delay: 9s; }
.qt-hw-motes span:nth-child(4) { left: 31%; animation-delay: 2s; }
.qt-hw-motes span:nth-child(5) { left: 44%; animation-delay: 12s; }
.qt-hw-motes span:nth-child(6) { left: 57%; animation-delay: 6s; }
.qt-hw-motes span:nth-child(7) { left: 66%; animation-delay: 15s; }
.qt-hw-motes span:nth-child(8) { left: 74%; animation-delay: 3s; }
.qt-hw-motes span:nth-child(9) { left: 83%; animation-delay: 10s; }
.qt-hw-motes span:nth-child(10) { left: 91%; animation-delay: 7s; }

@keyframes qt-hw-mote {
    0% { transform: translate3d(0, 0, 0); opacity: 0; }
    10% { opacity: 0.8; }
    80% { opacity: 0.5; }
    100% { transform: translate3d(30px, -70vh, 0); opacity: 0; }
}

/* Die eine Fledermaus */
.qt-hw-batlayer {
    display: none;
    position: fixed;
    inset: 0;
    /* main hat z-index 50 (templates/header.php), die Kopfzeile 9990 */
    z-index: 60;
    pointer-events: none;
    overflow: hidden;
}

html[data-theme="halloween"] .qt-hw-batlayer { display: block; }

.qt-hw-bat {
    position: absolute;
    /* knapp unter der Kopfzeile, damit sie nicht über Karten und Text fliegt */
    top: calc(64px + 1vh);
    left: 100vw;
    animation: qt-hw-bat-fly 34s linear infinite;
    animation-delay: 4s;
}

.qt-hw-wings {
    width: 76px;
    height: 94px;
    opacity: 0.92;
    background: url("../../assets/seasons/halloween/v2/bat-fly.webp") 0 0 / 1216px 94px no-repeat;
    filter: brightness(1.05) drop-shadow(0 0 12px rgba(184, 204, 255, 0.3));
    animation: qt-hw-bat-flap 0.8s steps(16) infinite, qt-hw-bat-bob 1.6s ease-in-out infinite;
}

@keyframes qt-hw-bat-flap { to { background-position: -1216px 0; } }
@keyframes qt-hw-bat-flap-s { to { background-position: -832px 0; } }

@keyframes qt-hw-bat-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes qt-hw-bat-fly {
    0% { transform: translate(0, 0) scale(0.9); }
    35% { transform: translate(-45vw, 1.5vh) scale(1); }
    70% { transform: translate(-90vw, -0.5vh) scale(0.8); }
    100% { transform: translate(calc(-100vw - 140px), 1vh) scale(0.7); }
}

@media (max-width: 640px) {
    .qt-hw-scene { opacity: 0.1; }
    .qt-hw-fog { height: 28vh; }
    .qt-hw-motes span:nth-child(n+7) { display: none; }
    .qt-hw-wings {
        width: 52px;
        height: 64px;
        background-size: 832px 64px;
        animation-name: qt-hw-bat-flap-s, qt-hw-bat-bob;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qt-season-layer,
    .qt-season-layer * {
        animation: none !important;
        transition: none !important;
    }

    .qt-hw-batlayer { display: none !important; }
}

@media print {
    .qt-season-layer,
    .qt-hw-batlayer { display: none !important; }
}