/*
 * Halloween-Special auf ganz BuchTicker und der Horror-Genreseite, mit eigenen Figuren für Science-Fiction
 * und Fantasy (temporär, endet von selbst nach Halloween:
 * App\Twig\HalloweenExtension::UNTIL). Danach diese Datei, templates/_halloween.html.twig und die
 * Erweiterung entfernen. Alles rein dekorativ: nur transform und opacity werden animiert, keine
 * Pointer-Events; bei „Bewegung reduzieren“ fliegt nichts, die Spinnen hängen still.
 */

:root {
    --hw-ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --hw-sway: cubic-bezier(.45, 0, .55, 1);
}

/* ===== Farben der Symbole (_halloween.html.twig) ===== */
.bo-hw-glow { fill: var(--highlight); }
.bo-hw-red { fill: var(--danger); }
.bo-hw-hole { fill: var(--surface-100); }
.bo-hw-pumpkin { fill: var(--highlight); }
.bo-hw-shine { fill: var(--on-night); opacity: .35; }
.bo-hw-pupil { fill: var(--surface-100); }

/* ===== Ebene über der Seite: Spinnen, Hexen, Fledermäuse, Nebel ===== */
.bo-halloween {
    position: fixed;
    inset: 0;
    z-index: 30;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.bo-halloween svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Spinnen am Faden: der Faden reicht bis über den oberen Rand, die Spinne pendelt auf und ab. */
.bo-halloween__spider {
    position: absolute;
    top: 0;
    width: 26px;
    height: 26px;
    color: var(--ink-body);
    transform: translateY(var(--hw-low));
    animation: hw-dangle var(--hw-time) var(--hw-sway) infinite alternate;
}

.bo-halloween__spider svg {
    transform-origin: 50% 0;
    animation: hw-swing calc(var(--hw-time) / 2.5) var(--hw-sway) infinite alternate;
}

.bo-halloween__thread {
    position: absolute;
    bottom: 60%;
    left: calc(50% - .5px);
    width: 1px;
    height: 100vh;
    background: currentColor;
    opacity: .45;
}

.bo-halloween__spider--1 { left: 7%; --hw-low: 110px; --hw-high: 34vh; --hw-time: 9s; }
.bo-halloween__spider--2 { left: 58%; --hw-low: 70px; --hw-high: 22vh; --hw-time: 12s; animation-delay: -4s; width: 20px; height: 20px; }
.bo-halloween__spider--3 { left: 91%; --hw-low: 160px; --hw-high: 48vh; --hw-time: 15s; animation-delay: -8s; }

@keyframes hw-dangle {
    from { transform: translateY(var(--hw-low)); }
    to { transform: translateY(var(--hw-high)); }
}

@keyframes hw-swing {
    from { transform: rotate(-9deg); }
    to { transform: rotate(9deg); }
}

/* Hexen auf dem Besen: queren die Seite und warten dann außerhalb, bis sie wiederkommen. */
.bo-halloween__witch {
    position: absolute;
    left: 0;
    width: 150px;
    height: 100px;
    color: var(--ink-body);
    opacity: .7;
    transform: translateX(-40vw);
    animation: hw-fly 24s linear infinite;
}

.bo-halloween__witch svg {
    animation: hw-bob 1.8s var(--hw-sway) infinite alternate;
}

.bo-halloween__witch--1 { top: 14vh; animation-delay: 2s; }
.bo-halloween__witch--2 {
    top: 46vh;
    width: 96px;
    height: 64px;
    opacity: .45;
    animation-name: hw-fly-back;
    animation-duration: 33s;
    animation-delay: -12s;
}

/* The drawing flies to the right: the witch flying back to the left is mirrored. */
.bo-halloween__witch--2 svg { scale: -1 1; }

@keyframes hw-fly {
    0% { transform: translateX(-40vw) translateY(0); }
    55% { transform: translateX(120vw) translateY(-6vh); }
    100% { transform: translateX(120vw) translateY(-6vh); }
}

@keyframes hw-fly-back {
    0% { transform: translateX(120vw) translateY(0); }
    50% { transform: translateX(-40vw) translateY(5vh); }
    100% { transform: translateX(-40vw) translateY(5vh); }
}

@keyframes hw-bob {
    from { transform: translateY(-7px) rotate(-3deg); }
    to { transform: translateY(7px) rotate(2deg); }
}

/* Fledermäuse: flattern (Flügel) und ziehen Schleifen. */
.bo-halloween__bat {
    position: absolute;
    width: 46px;
    height: 23px;
    color: var(--ink-body);
    opacity: .85;
    animation: hw-bat-loop var(--hw-time) var(--hw-ease-in-out) infinite;
}

.bo-halloween__bat svg {
    animation: hw-flap .16s linear infinite alternate;
}

.bo-halloween__bat--1 { top: 22vh; left: 18vw; --hw-time: 11s; }
.bo-halloween__bat--2 { top: 30vh; left: 72vw; --hw-time: 14s; animation-delay: -5s; width: 34px; height: 17px; }
.bo-halloween__bat--3 { top: 64vh; left: 40vw; --hw-time: 17s; animation-delay: -9s; }
.bo-halloween__bat--4 { top: 12vh; left: 84vw; --hw-time: 13s; animation-delay: -3s; width: 30px; height: 15px; }

@keyframes hw-bat-loop {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(14vw, -8vh); }
    50% { transform: translate(-6vw, -14vh); }
    75% { transform: translate(-16vw, 4vh); }
}

@keyframes hw-flap {
    from { transform: scaleY(1); }
    to { transform: scaleY(.35); }
}

/* Bodennebel: zwei Schwaden, die langsam vorbeiziehen. */
.bo-halloween__fog {
    position: absolute;
    bottom: -4vh;
    left: 0;
    width: 200%;
    height: 26vh;
    background:
        radial-gradient(ellipse 18% 60% at 12% 70%, color-mix(in srgb, var(--ink) 9%, transparent), transparent 70%),
        radial-gradient(ellipse 22% 50% at 38% 80%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 70%),
        radial-gradient(ellipse 18% 60% at 62% 70%, color-mix(in srgb, var(--ink) 9%, transparent), transparent 70%),
        radial-gradient(ellipse 22% 50% at 88% 80%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 70%);
    animation: hw-drift 46s linear infinite;
}

@keyframes hw-drift {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ===== Science-Fiction: UFOs, Sternschnuppen, Sternenhimmel, Ringplanet ===== */
.bo-hw-dome { fill: var(--accent); opacity: .55; }
.bo-hw-light { fill: var(--highlight); animation: hw-blink-light 1.2s steps(2, jump-none) infinite; }
.bo-hw-light:nth-of-type(2n) { animation-delay: -.6s; }

@keyframes hw-blink-light {
    from { opacity: 1; }
    to { opacity: .2; }
}

/* Außerirdische Spinnen: die Augen leuchten in Teal. */
.bo-halloween--scifi .bo-hw-glow { fill: var(--accent); }

.bo-halloween__ufo {
    position: absolute;
    left: 0;
    width: 110px;
    height: 55px;
    color: var(--ink-body);
    opacity: .85;
    animation: hw-fly 26s var(--hw-ease-in-out) infinite;
}

.bo-halloween__ufo svg {
    position: relative;
    animation: hw-hover 2.2s var(--hw-sway) infinite alternate;
}

.bo-halloween__ufo--1 { top: 16vh; animation-delay: 1s; }
.bo-halloween__ufo--2 {
    top: 44vh;
    width: 74px;
    height: 37px;
    opacity: .55;
    animation-name: hw-fly-back;
    animation-duration: 34s;
    animation-delay: -14s;
}

/* Traktorstrahl: ein Lichtkegel unter dem UFO, der an- und abschwillt. */
.bo-halloween__beam {
    position: absolute;
    top: 70%;
    left: 22%;
    width: 56%;
    height: 220%;
    background: linear-gradient(color-mix(in srgb, var(--accent) 45%, transparent), transparent);
    clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
    transform-origin: 50% 0;
    animation: hw-beam 3.4s var(--hw-sway) infinite alternate;
}

@keyframes hw-hover {
    from { transform: translateY(-6px) rotate(-4deg); }
    to { transform: translateY(6px) rotate(4deg); }
}

@keyframes hw-beam {
    from { opacity: 0; transform: scaleY(.3); }
    to { opacity: .9; transform: scaleY(1); }
}

/* Sternschnuppen: kurze Lichtstreifen, die schräg herabschießen. */
.bo-halloween__meteor {
    position: absolute;
    width: 140px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--on-night));
    opacity: 0;
    rotate: 24deg;
    animation: hw-meteor 7s cubic-bezier(.23, 1, .32, 1) infinite;
}

.bo-halloween__meteor--1 { top: 8vh; left: 20vw; }
.bo-halloween__meteor--2 { top: 4vh; left: 58vw; animation-delay: -2.5s; animation-duration: 9s; }
.bo-halloween__meteor--3 { top: 26vh; left: 76vw; animation-delay: -5s; animation-duration: 11s; }

@keyframes hw-meteor {
    0%, 70% { opacity: 0; transform: translateX(-30vw); }
    74% { opacity: 1; }
    86%, 100% { opacity: 0; transform: translateX(10vw); }
}

/* Sternenhimmel: zwei Punktraster, die gegeneinander funkeln. */
.bo-halloween__stars,
.bo-halloween__stars::after {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, var(--on-night), transparent),
        radial-gradient(1px 1px at 34% 62%, var(--on-night), transparent),
        radial-gradient(1.5px 1.5px at 58% 28%, var(--on-night), transparent),
        radial-gradient(1px 1px at 82% 74%, var(--on-night), transparent),
        radial-gradient(1px 1px at 92% 12%, var(--on-night), transparent);
    background-size: 340px 300px;
    opacity: .35;
    animation: hw-twinkle 4s var(--hw-sway) infinite alternate;
}

.bo-halloween__stars::after {
    content: "";
    background-size: 460px 410px;
    background-position: 120px 90px;
    animation-delay: -2s;
}

@keyframes hw-twinkle {
    from { opacity: .12; }
    to { opacity: .45; }
}

/* Ringplanet im Seitenkopf statt Mond. */
.bo-halloween-planet {
    position: absolute;
    z-index: 1;
    top: 40px;
    left: 54%;
    width: 78px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, var(--on-primary-accent), var(--accent) 55%, var(--primary) 100%);
    box-shadow: 0 0 50px 8px color-mix(in srgb, var(--accent) 30%, transparent);
    animation: hw-planet 8s var(--hw-sway) infinite alternate;
}

.bo-halloween-planet::after {
    content: "";
    position: absolute;
    inset: 38% -42%;
    border: 3px solid color-mix(in srgb, var(--highlight-ink) 75%, transparent);
    border-radius: 50%;
    rotate: -18deg;
}

@keyframes hw-planet {
    from { transform: translateY(-4px) rotate(-3deg); }
    to { transform: translateY(4px) rotate(3deg); }
}

/* Startseite (Mix): das UFO fliegt in der Mitte, zeitversetzt zu Hexe und Drache. */
.bo-halloween__ufo--mix {
    top: 30vh;
    width: 90px;
    height: 45px;
    opacity: .7;
    animation-duration: 30s;
    animation-delay: -20s;
}

/* ===== Fantasy: Drachen mit Flügelschlag, aufsteigende Zauberfunken ===== */
.bo-halloween--fantasy .bo-hw-glow { fill: var(--danger); }

.bo-halloween__dragon {
    position: absolute;
    left: 0;
    width: 170px;
    height: 85px;
    color: var(--ink-body);
    opacity: .7;
    animation: hw-fly 28s var(--hw-ease-in-out) infinite;
}

.bo-halloween__dragon svg {
    position: absolute;
    inset: 0;
}

/* Der Flügel schlägt um seine Wurzel am Rücken. */
.bo-halloween__wing {
    transform-origin: 50% 56%;
    animation: hw-wingbeat .9s var(--hw-sway) infinite alternate;
}

.bo-halloween__dragon--1 { top: 12vh; animation-delay: 3s; }
.bo-halloween__dragon--2 {
    top: 42vh;
    width: 110px;
    height: 55px;
    opacity: .45;
    animation-name: hw-fly-back;
    animation-duration: 36s;
    animation-delay: -15s;
}

.bo-halloween__dragon--2 svg { scale: -1 1; }

@keyframes hw-wingbeat {
    from { transform: scaleY(1); }
    to { transform: scaleY(-.55); }
}

.bo-halloween__spark {
    position: absolute;
    bottom: -12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--highlight-ink), color-mix(in srgb, var(--highlight) 0%, transparent) 70%);
    opacity: 0;
    animation: hw-rise var(--hw-time) linear infinite;
}

.bo-halloween__spark--1 { left: 6%; --hw-time: 11s; }
.bo-halloween__spark--2 { left: 15%; --hw-time: 14s; animation-delay: -6s; }
.bo-halloween__spark--3 { left: 27%; --hw-time: 12s; animation-delay: -3s; }
.bo-halloween__spark--4 { left: 38%; --hw-time: 16s; animation-delay: -9s; }
.bo-halloween__spark--5 { left: 49%; --hw-time: 13s; animation-delay: -1s; }
.bo-halloween__spark--6 { left: 61%; --hw-time: 15s; animation-delay: -7s; }
.bo-halloween__spark--7 { left: 70%; --hw-time: 11s; animation-delay: -4s; }
.bo-halloween__spark--8 { left: 79%; --hw-time: 17s; animation-delay: -11s; }
.bo-halloween__spark--9 { left: 88%; --hw-time: 12s; animation-delay: -8s; }
.bo-halloween__spark--10 { left: 95%; --hw-time: 14s; animation-delay: -2s; }

@keyframes hw-rise {
    0% { opacity: 0; transform: translate(0, 0); }
    10% { opacity: .9; }
    50% { transform: translate(18px, -50vh); }
    90% { opacity: .5; }
    100% { opacity: 0; transform: translate(-12px, -100vh); }
}

/* ===== Seitenkopf: Mond (Planet), Spinnennetze ===== */
.bo-pagehead--halloween {
    position: relative;
    overflow: hidden;
}

.bo-pagehead--halloween > .bo-container {
    position: relative;
    z-index: 1;
}

.bo-halloween-moon {
    position: absolute;
    z-index: 1;
    top: 34px;
    left: 54%;
    width: 92px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 36%, var(--highlight-ink), var(--highlight) 70%);
    box-shadow: 0 0 60px 12px color-mix(in srgb, var(--highlight) 35%, transparent);
    opacity: .85;
    animation: hw-glow 6s var(--hw-sway) infinite alternate;
}

@keyframes hw-glow {
    from { opacity: .7; transform: scale(.98); }
    to { opacity: .95; transform: scale(1.02); }
}

.bo-halloween-web {
    position: absolute;
    top: 0;
    width: 150px;
    height: 150px;
    color: var(--ink-muted);
    opacity: .45;
}

.bo-halloween-web--left { left: 0; }
.bo-halloween-web--right { right: 0; scale: -1 1; }

/* ===== Etikett in der Listenzeile ===== */
.bo-haunt-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    color: var(--highlight-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.bo-haunt-tag svg {
    width: 18px;
    height: 18px;
    flex: none;
    transition: transform 200ms cubic-bezier(.23, 1, .32, 1);
}

@media (hover: hover) and (pointer: fine) {
    .bo-row:hover .bo-haunt-tag svg {
        transform: scale(1.25) rotate(-8deg);
    }
}

/* Mobil: weniger Gewimmel. */
@media (max-width: 600px) {
    .bo-halloween__spider--3,
    .bo-halloween__bat--3,
    .bo-halloween__bat--4,
    .bo-halloween__witch--2,
    .bo-halloween__ufo--2,
    .bo-halloween--fantasy .bo-halloween__dragon--2,
    .bo-halloween__ufo--mix,
    .bo-halloween__meteor--3,
    .bo-halloween__spark:nth-child(2n) {
        display: none;
    }

    .bo-halloween-moon {
        width: 64px;
        left: auto;
        right: 6%;
    }

    .bo-halloween-web {
        width: 96px;
        height: 96px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-halloween__witch,
    .bo-halloween__bat,
    .bo-halloween__fog,
    .bo-halloween__ufo,
    .bo-halloween__meteor,
    .bo-halloween__dragon,
    .bo-halloween__spark {
        display: none;
    }

    .bo-halloween *,
    .bo-halloween__spider,
    .bo-halloween-moon,
    .bo-halloween-planet,
    .bo-halloween-planet::after,
    .bo-halloween__stars,
    .bo-halloween__stars::after,
    .bo-hw-light {
        animation: none;
    }
}