/*
 * Theme "winterlich" – nur für Turniere mit dieser Gestaltung geladen (<html class="theme-winter">).
 *
 * Fest im Dark-Mode (data-theme="dark" im Layout): Nachthimmel mit eisblauen Karten.
 * Die helle Variante bleibt als Reserve erhalten und lässt sich mit data-theme="light" aktivieren.
 * Dazu eine Schneekante unter dem Kopf und leiser Schneefall im Hintergrund.
 *
 * Schnee aus CSS-Punkten, die Schneekante aus einer kleinen eingebetteten SVG-Maske.
 * Beide bewegen sich nur per transform – ohne JavaScript oder zusätzliche Bildanfragen.
 * Bei "Bewegung reduzieren" stehen Schnee und Wellen still.
 */

/* Hell – Reserve, im regulären Winter-Theme nicht aktiv. */
:root.theme-winter:not([data-theme=dark]) {
    --pico-background-color: #f2f7fc;
    --pico-card-background-color: #ffffff;
    --pico-card-sectioning-background-color: #f4f9ff;
    --pico-card-box-shadow: 0 0.25rem 1rem rgba(49, 90, 176, 0.1);
    --w-sky: #dcebf8;
    --w-heading: #1b3a5c;
    --w-frost: #cfe2f3;
    --w-snowcap: #ffffff;
    --w-flake: rgba(69, 114, 170, 0.68);
    --w-flake-small: rgba(82, 131, 185, 0.5);
}

/* dunkel */
@media only screen and (prefers-color-scheme: dark) {
    :root.theme-winter:not([data-theme]) {
        --pico-background-color: #0d1828;
        --pico-card-background-color: #15263b;
        --pico-card-sectioning-background-color: #1b3150;
        --pico-card-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.35);
        --pico-form-element-background-color: #0f1c2e;
        --pico-form-element-active-background-color: #0f1c2e;
        --pico-form-element-border-color: #5f80a6;
        --w-sky: #16304f;
        --w-heading: #cfe6ff;
        --w-frost: #26476b;
        --w-snowcap: #e8f2fc;
        --w-flake: rgba(255, 255, 255, 0.45);
        --w-flake-small: rgba(255, 255, 255, 0.25);
    }
}

:root.theme-winter[data-theme=dark] {
    --pico-background-color: #0d1828;
    --pico-card-background-color: #15263b;
    --pico-card-sectioning-background-color: #1b3150;
    --pico-card-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.35);
    --pico-form-element-background-color: #0f1c2e;
    --pico-form-element-active-background-color: #0f1c2e;
    --pico-form-element-border-color: #5f80a6;
    --w-sky: #16304f;
    --w-heading: #cfe6ff;
    --w-frost: #26476b;
    --w-snowcap: #e8f2fc;
    --w-flake: rgba(255, 255, 255, 0.45);
    --w-flake-small: rgba(255, 255, 255, 0.25);
}

/* Himmel: oben etwas kräftiger, scrollt mit (kein background-attachment: fixed – das kostet beim Scrollen) */
:root.theme-winter {
    background-image: linear-gradient(180deg, var(--w-sky) 0, var(--pico-background-color) 28rem);
    background-repeat: no-repeat;
}

.theme-winter h1,
.theme-winter h2,
.theme-winter h3,
.theme-winter .description h3 {
    --pico-color: var(--w-heading);
    color: var(--w-heading);
}

.theme-winter main h1::after {
    content: " \2744\FE0E"; /* ❄ als Textzeichen, nicht als buntes Emoji */
    font-weight: 400;
    font-size: 1.5em; /* größer als der Titel – line-height 0, damit die Zeile nicht höher wird */
    line-height: 0;
    vertical-align: -0.14em; /* Mitte der Flocke auf Mitte der Großbuchstaben */
    opacity: 0.6;
}

/* Schneekante: zwei sanfte, versetzte Wellen mit einer eisblauen Ebene im Hintergrund. */
.theme-winter body > header {
    border-bottom-color: transparent;
    position: relative;
}

.theme-winter .winter-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.9rem;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    pointer-events: none;
}

.theme-winter .winter-waves::before,
.theme-winter .winter-waves::after {
    --w-wave-width: 32rem;
    content: "";
    position: absolute;
    left: calc(-1 * var(--w-wave-width));
    right: 0;
    bottom: 0;
    height: 100%;
    /* Gleiche Höhe und waagerechte Tangente an beiden Enden: jede Kachel schließt nahtlos an. */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 32' preserveAspectRatio='none'%3E%3Cpath d='M0 16C55 16 75 4 140 4S235 28 310 28S430 8 480 8S555 16 600 16V32H0Z'/%3E%3C/svg%3E");
    mask-size: var(--w-wave-width) 100%;
    mask-repeat: repeat-x;
    animation: theme-winter-drift 48s linear infinite;
}

.theme-winter .winter-waves::before {
    --w-wave-width: 41rem;
    background: var(--w-frost);
    opacity: 0.8;
    animation-duration: 68s;
    animation-direction: reverse;
    animation-delay: -23s;
}

.theme-winter .winter-waves::after {
    height: 72%;
    background: linear-gradient(180deg, var(--w-snowcap) 15%, var(--w-frost) 100%);
    animation-delay: -11s;
}

/* Eine volle Wellenbreite pro Durchlauf; die zusätzliche Kachel bleibt im Ausschnitt verborgen. */
@keyframes theme-winter-drift {
    to { transform: translate3d(var(--w-wave-width), 0, 0); }
}

/* Karten wie leicht bereift */
.theme-winter article,
.theme-winter .flash {
    border: 0.05rem solid var(--w-frost);
}

/* Hinweisboxen behalten ihren farbigen Rand links (Farben wie in app.css) */
.theme-winter :is(.status, .flash) {
    border-left-width: 0.2rem;
}

.theme-winter .status {
    border-left-color: var(--pico-primary-background);
}

.theme-winter .flash {
    border-left-color: var(--bi-blue);
}

.theme-winter .flash-error {
    border-left-color: var(--pico-del-color);
}

.theme-winter .poster {
    border: 0.15rem solid var(--pico-card-background-color);
    box-shadow: var(--pico-card-box-shadow);
}

/* --- Schneefall: zwei Ebenen, hinter dem Inhalt --- */

.theme-winter body::before,
.theme-winter body::after {
    content: "";
    position: fixed;
    left: 0;
    width: 100%;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
    background-repeat: repeat; /* Pico setzt für alle (Pseudo-)Elemente no-repeat */
}

/* große Flocken, Kachel 240px: verschoben wird um ein Vielfaches davon, damit die Bewegung nahtlos läuft */
.theme-winter body::before {
    top: -480px;
    height: calc(100% + 480px);
    background-image:
        radial-gradient(3px 3px at 30px 40px, var(--w-flake) 50%, transparent 51%),
        radial-gradient(4px 4px at 150px 110px, var(--w-flake) 50%, transparent 51%),
        radial-gradient(3px 3px at 90px 190px, var(--w-flake) 50%, transparent 51%),
        radial-gradient(4px 4px at 210px 220px, var(--w-flake) 50%, transparent 51%);
    background-size: 240px 240px;
    animation: theme-winter-snow 48s linear infinite;
}

/* kleine Flocken, Kachel 160px, langsamer */
.theme-winter body::after {
    top: -320px;
    height: calc(100% + 320px);
    background-image:
        radial-gradient(2px 2px at 20px 30px, var(--w-flake-small) 50%, transparent 51%),
        radial-gradient(2px 2px at 110px 70px, var(--w-flake-small) 50%, transparent 51%),
        radial-gradient(2px 2px at 60px 130px, var(--w-flake-small) 50%, transparent 51%),
        radial-gradient(2px 2px at 140px 150px, var(--w-flake-small) 50%, transparent 51%);
    background-size: 160px 160px;
    animation: theme-winter-snow-small 64s linear infinite;
}

@keyframes theme-winter-snow {
    to { transform: translate3d(0, 480px, 0); }
}

@keyframes theme-winter-snow-small {
    to { transform: translate3d(0, 320px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .theme-winter body::before,
    .theme-winter body::after,
    .theme-winter .winter-waves::before,
    .theme-winter .winter-waves::after {
        animation: none;
    }
}

/* Druck: kein Schnee, keine Dekoration */
@media print {
    .theme-winter body::before,
    .theme-winter body::after,
    .theme-winter .winter-waves,
    .theme-winter main h1::after {
        display: none;
    }
}