/* ==================== SVG Background Animations ==================== */
/* Animated Mesh Gradient with Dark/Light Mode */

/* Base layer styling for both SVG backgrounds */
.svg-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
}

/* Dark mode: show dark SVG, hide light SVG */
#svg-background-dark {
    opacity: 1;
}

#svg-background-light {
    opacity: 0;
}

/* Light mode (no .dark class): show light SVG, hide dark SVG */
html:not(.dark) #svg-background-dark {
    opacity: 0;
}

html:not(.dark) #svg-background-light {
    opacity: 1;
}

/* Legacy container hidden */
#svg-background-container {
    display: none !important;
}

/* ==================== BASIS TRANSITIONS ==================== */

/* Himmel-Schichten - Sanfte Übergänge zwischen Tageszeiten */
.sky-layer {
    transition: opacity 8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sterne Container */
#sterne-container {
    transition: opacity 6s ease-in-out;
}

/* Sonne und Mond */
#sonne {
    transition: transform 10s ease-in-out, opacity 6s ease;
}

#mond {
    transition: transform 10s ease-in-out, opacity 6s ease;
}

/* Wald-Ebenen - Leichte Helligkeitsanpassung je nach Tageszeit */
#wald-hinten,
#wald-mitte,
#wald-vorne {
    transition: filter 8s ease, opacity 8s ease;
}

/* Schneeboden - Farbtonanpassung */
#schnee-boden,
#schnee-vordergrund {
    transition: filter 8s ease;
}

/* ==================== WOLKEN ANIMATION ==================== */

.wolke-drift {
    animation: wolken-drift var(--wolke-dauer, 180s) linear infinite;
    animation-delay: var(--wolke-delay, 0s);
    transform: translateY(var(--wolke-y, 150px));
}

@keyframes wolken-drift {
    0% {
        transform: translateX(-200px) translateY(var(--wolke-y, 150px));
    }

    100% {
        transform: translateX(2120px) translateY(var(--wolke-y, 150px));
    }
}

/* ==================== SCHNEEFALL ANIMATION ==================== */

/* Schneefall Basis-Klasse */
.schneeflocke {
    animation: schnee-fallen var(--schnee-dauer, 12s) linear infinite;
    animation-delay: var(--schnee-delay, 0s);
    will-change: transform;
}

@keyframes schnee-fallen {
    0% {
        transform: translateY(-50px) translateX(0) rotate(0deg);
        opacity: 0;
    }

    5% {
        opacity: var(--schnee-opacity, 0.8);
    }

    95% {
        opacity: var(--schnee-opacity, 0.8);
    }

    100% {
        transform: translateY(1150px) translateX(var(--schnee-drift, -50px)) rotate(360deg);
        opacity: 0;
    }
}

/* Verschiedene Schneeschichten für Tiefeneffekt */
.schneefall-schicht {
    pointer-events: none;
}

/* Schicht 1: Vordergrund (groß, schnell) */
#schnee-schicht-1 .schneeflocke {
    --schnee-dauer: 8s;
    --schnee-opacity: 0.9;
    --schnee-drift: -80px;
}

/* Schicht 2: Mittelgrund */
#schnee-schicht-2 .schneeflocke {
    --schnee-dauer: 12s;
    --schnee-opacity: 0.7;
    --schnee-drift: -50px;
}

/* Schicht 3: Hintergrund (klein, langsam) */
#schnee-schicht-3 .schneeflocke {
    --schnee-dauer: 18s;
    --schnee-opacity: 0.5;
    --schnee-drift: -30px;
}

/* ==================== CSS SCHNEEFLOCKE (USER) ==================== */

/* Container für die gesamte Flocke */
.snowflake-html {
    position: relative;
    width: 0;
    height: 0;
    /* Animation für langsame Rotation */
    animation: spin 20s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* Die Hauptarme der Flocke */
.arm {
    position: absolute;
    width: 4px;
    height: 100px;
    /* Länge eines Arms (Radius) */
    background: white;
    border-radius: 4px;
    transform-origin: bottom center;
    /* Dreht sich um die Mitte der Flocke */
    bottom: 0;
    left: -2px;
    /* Zentrieren (Hälfte der Breite) */
}

/* Erzeugung der 6 Arme durch Rotation */
.arm:nth-child(1) {
    transform: rotate(0deg) translateY(-10px);
}

.arm:nth-child(2) {
    transform: rotate(60deg) translateY(-10px);
}

.arm:nth-child(3) {
    transform: rotate(120deg) translateY(-10px);
}

.arm:nth-child(4) {
    transform: rotate(180deg) translateY(-10px);
}

.arm:nth-child(5) {
    transform: rotate(240deg) translateY(-10px);
}

.arm:nth-child(6) {
    transform: rotate(300deg) translateY(-10px);
}

/* Die kleinen Verzweigungen an den Armen */
.branch {
    position: absolute;
    width: 4px;
    height: 25px;
    background: white;
    border-radius: 2px;
    bottom: 40px;
    /* Position am Arm */
    left: 0;
}

.branch.left {
    transform: rotate(-45deg);
    transform-origin: bottom center;
}

.branch.right {
    transform: rotate(45deg);
    transform-origin: bottom center;
}

/* Zweite Ebene von Verzweigungen (weiter oben) */
.branch.top-left {
    bottom: 70px;
    height: 20px;
    transform: rotate(-45deg);
    transform-origin: bottom center;
}

.branch.top-right {
    bottom: 70px;
    height: 20px;
    transform: rotate(45deg);
    transform-origin: bottom center;
}

/* Das Zentrum der Flocke */
.center {
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: -8px;
    left: -8px;
    z-index: 10;
}

#schnee-schicht-3 .schneeflocke {
    --schnee-dauer: 18s;
    --schnee-opacity: 0.5;
    --schnee-drift: -30px;
}

/* ==================== STERNE TWINKLE ANIMATION ==================== */

#sterne-container use {
    animation: stern-funkeln 3s ease-in-out infinite;
    animation-delay: var(--stern-delay, 0s);
}

@keyframes stern-funkeln {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Große Sterne funkeln langsamer und heller */
#stern-gross {
    animation: stern-funkeln-gross 5s ease-in-out infinite;
}

@keyframes stern-funkeln-gross {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
        filter: blur(0px);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
        filter: blur(0.5px);
    }
}

/* ==================== TAGESZEIT-SPEZIFISCHE FILTER ==================== */

/* Morgen: Wärmere Töne, mittlere Helligkeit */
.tageszeit-morgen #wald-hinten,
.tageszeit-morgen #wald-mitte,
.tageszeit-morgen #wald-vorne {
    filter: brightness(0.85) saturate(0.9) sepia(0.1);
}

.tageszeit-morgen #schnee-boden,
.tageszeit-morgen #schnee-vordergrund {
    filter: brightness(0.9) sepia(0.08);
}

/* Mittag: Hellste Variante */
.tageszeit-mittag #wald-hinten,
.tageszeit-mittag #wald-mitte,
.tageszeit-mittag #wald-vorne {
    filter: brightness(1.1) saturate(1.1);
}

.tageszeit-mittag #schnee-boden,
.tageszeit-mittag #schnee-vordergrund {
    filter: brightness(1.05);
}

/* Nachmittag: Goldene Töne */
.tageszeit-nachmittag #wald-hinten,
.tageszeit-nachmittag #wald-mitte,
.tageszeit-nachmittag #wald-vorne {
    filter: brightness(0.95) saturate(0.95) sepia(0.15);
}

.tageszeit-nachmittag #schnee-boden,
.tageszeit-nachmittag #schnee-vordergrund {
    filter: brightness(0.95) sepia(0.1);
}

/* Abend: Dunkler, bläulicher */
.tageszeit-abend #wald-hinten,
.tageszeit-abend #wald-mitte,
.tageszeit-abend #wald-vorne {
    filter: brightness(0.6) saturate(0.7);
}

.tageszeit-abend #schnee-boden,
.tageszeit-abend #schnee-vordergrund {
    filter: brightness(0.7) saturate(0.85) hue-rotate(-10deg);
}

/* ==================== SONNE GLOW ANIMATION ==================== */

#sonne circle:first-child {
    animation: sonne-glow 8s ease-in-out infinite;
}

@keyframes sonne-glow {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* ==================== MOND GLOW ==================== */

#mond {
    filter: drop-shadow(0 0 20px rgba(200, 200, 255, 0.3));
}

/* ==================== PERFORMANCE OPTIMIERUNGEN ==================== */

/* GPU-Beschleunigung für animierte Elemente */
.schneeflocke,
.wolke-drift,
#sterne-container use,
#sonne,
#mond {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Reduzierte Bewegung für Benutzer die das bevorzugen */
@media (prefers-reduced-motion: reduce) {

    .schneeflocke,
    .wolke-drift,
    #sterne-container use {
        animation-duration: 0s !important;
        animation: none !important;
    }

    .sky-layer,
    #sterne-container,
    #sonne,
    #mond {
        transition-duration: 0s !important;
    }
}

/* ==================== VISIBILITY CLASSES ==================== */

.element-hidden {
    opacity: 0 !important;
    pointer-events: none;
}

.element-visible {
    opacity: 1;
    transition: opacity 3s ease;
}

/* ==================== WIDGET GLASS MORPHISM ANPASSUNGEN ==================== */

/* Basis Glass-Variablen werden per JS gesetzt */
:root {
    --glass-bg: rgba(20, 30, 50, 0.65);
    --glass-border: rgba(100, 150, 200, 0.2);
    --shadow-color: rgba(0, 0, 0, 0.4);
}