/* ============================================
   Twinkling Stars Animation
   ============================================ */

/* Stars Container */
.twinkling-stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
    contain: layout style;
    /* Performance: GPU-Beschleunigung für Container */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Sky Stars Container (für sky-transition) */
.sky-stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
    contain: layout style;
    /* Performance: GPU-Beschleunigung */
    backface-visibility: hidden;
}

/* Individual Star */
.twinkling-star {
    position: absolute;
    pointer-events: none;
    opacity: 0.85;
    /* Performance: GPU-Beschleunigung für ~5-10% Gewinn */
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    /* Performance: Transform-Origin für optimierte Keyframes */
    transform-origin: center center;
    /* Performance: Isolation für Filter-Rendering */
    isolation: isolate;
}

.twinkling-star img {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* Animierter Glow-Effekt für alle Sterne mit drop-shadow */
/* Filter wird jetzt in den Größen-Klassen definiert */

/* Glow-Animation synchronisiert mit Stern-Animation - Performance-optimiert mit nur 1 Layer */
@keyframes star-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }
    
    /* Erster schneller Blink (12%) - synchronisiert mit Stern */
    12% {
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
    }
    
    /* Zurück zu normal (20%) - synchronisiert mit Stern */
    20% {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
    }
    
    /* Subtiler Blink in der Mitte (55%) - synchronisiert mit Stern */
    55% {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
    }
    
    /* Stärkster Blink am Ende (88%) - synchronisiert mit Stern */
    88% {
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
    }
}

/* Realistisches Stern-Funkeln mit asymmetrischen Blinks */
@keyframes twinkle-pulse-with-fadein {
    0%, 100% {
        opacity: 0.85;
        transform: translateZ(0) scale(1);
    }
    
    /* Erster schneller Blink (12%) */
    12% {
        opacity: 1;
        transform: translateZ(0) scale(1.3);
    }
    
    /* Zurück zu normal (20%) */
    20% {
        opacity: 0.8;
        transform: translateZ(0) scale(1);
    }
    
    /* Subtiler Blink in der Mitte (55%) */
    55% {
        opacity: 0.95;
        transform: translateZ(0) scale(1.35);
    }
    
    /* Stärkster Blink am Ende (88%) */
    88% {
        opacity: 1;
        transform: translateZ(0) scale(1.5);
    }
}

/* Realistisches Stern-Funkeln für Hover-Sterne */
@keyframes twinkle-pulse {
    0%, 100% {
        opacity: 0.85;
        transform: translateZ(0) scale(1);
    }
    
    /* Erster schneller Blink (12%) */
    12% {
        opacity: 1;
        transform: translateZ(0) scale(1.3);
    }
    
    /* Zurück zu normal (20%) */
    20% {
        opacity: 0.8;
        transform: translateZ(0) scale(1);
    }
    
    /* Subtiler Blink in der Mitte (55%) */
    55% {
        opacity: 0.95;
        transform: translateZ(0) scale(1.35);
    }
    
    /* Stärkster Blink am Ende (88%) */
    88% {
        opacity: 1;
        transform: translateZ(0) scale(1.5);
    }
}

/* Apply pulsing animation with fade-in - linear für flüssige Übergänge */
/* Animation wird jetzt in .twinkling-star.animate kombiniert */

/* Glow-Animation synchronisiert mit Stern-Animation */
.twinkling-star.animate {
    animation: twinkle-pulse-with-fadein var(--animation-duration, 3s) linear infinite,
               star-glow-pulse var(--animation-duration, 3s) linear infinite;
    animation-delay: var(--animation-delay, 0s), var(--animation-delay, 0s);
    /* animation-fill-mode: both sorgt dafür, dass 0% Keyframe auch während Delay angewendet wird */
    animation-fill-mode: both, both;
    /* Performance: will-change für alle animierten Properties inkl. filter */
    will-change: transform, opacity, filter;
}

/* Statischer Glow für mittlere Sternengruppe (Gruppe 2) - kein animierter Glow */
.twinkling-star.static-glow.animate {
    /* Nur Stern-Animation, keine Glow-Animation */
    animation: twinkle-pulse-with-fadein var(--animation-duration, 3s) linear infinite;
    animation-delay: var(--animation-delay, 0s);
    /* Performance: will-change ohne filter, da Glow statisch */
    will-change: transform, opacity;
}

/* Hover Stars - sofort sichtbar ohne Fade-in */
.twinkling-star.hover-star {
    animation: none;
    opacity: 1;
    transform: scale(1);
}

.twinkling-star.hover-star.animate {
    animation: twinkle-pulse var(--animation-duration, 2s) linear infinite,
               star-glow-pulse var(--animation-duration, 2s) linear infinite;
    animation-delay: var(--animation-delay, 0s), var(--animation-delay, 0s);
    /* Performance: will-change nur für animierte Properties */
    will-change: transform, opacity, filter;
}

/* Hover Constellation */
.hover-constellation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease-out;
    /* Performance: GPU-Beschleunigung */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
}

.hover-constellation.visible {
    opacity: 1;
}

/* Constellation connecting lines */
.constellation-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform-origin: left center;
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.hover-constellation.visible .constellation-line {
    opacity: 1;
}

/* Size Variations - Mehr Variation von tiny bis xlarge - Performance-optimiert mit nur 1 Layer */
/* Initiale Glow-Werte entsprechen dem 0% Keyframe der Animation für nahtlosen Start */
.twinkling-star.size-tiny {
    width: 2.4px;
    height: 3px;
    /* Size-spezifische Glow-Größen mit drop-shadow - entspricht 0% Keyframe für nahtlosen Animation-Start */
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

/* Statischer Glow für mittlere Gruppe - kleinerer Radius, 0.8 Opacity */
.twinkling-star.static-glow.size-tiny {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
}

.twinkling-star.size-small {
    width: 3.6px;
    height: 4.2px;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

.twinkling-star.static-glow.size-small {
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.8));
}

.twinkling-star.size-medium {
    width: 5.4px;
    height: 6px;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

.twinkling-star.static-glow.size-medium {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}

.twinkling-star.size-large {
    width: 6.6px;
    height: 7.8px;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

.twinkling-star.static-glow.size-large {
    filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.8));
}

.twinkling-star.size-xlarge {
    width: 8.4px;
    height: 10.2px;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

.twinkling-star.static-glow.size-xlarge {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}

/* Mobile adjustments - Performance-optimiert mit nur 1 Layer, initiale Werte entsprechen 0% Keyframe */
@media (min-width: 768px) {
    .twinkling-star.size-tiny {
        width: 3px;
        height: 3.6px;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }

    .twinkling-star.static-glow.size-tiny {
        filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
    }

    .twinkling-star.size-small {
        width: 4.2px;
        height: 5.4px;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }

    .twinkling-star.static-glow.size-small {
        filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.8));
    }

    .twinkling-star.size-medium {
        width: 6px;
        height: 7.2px;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }

    .twinkling-star.static-glow.size-medium {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
    }

    .twinkling-star.size-large {
        width: 7.8px;
        height: 9px;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }

    .twinkling-star.static-glow.size-large {
        filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.8));
    }

    .twinkling-star.size-xlarge {
        width: 9.6px;
        height: 11.4px;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }

    .twinkling-star.static-glow.size-xlarge {
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
    }
}

@media (min-width: 1024px) {
    .twinkling-star.size-tiny {
        width: 3.6px;
        height: 4.2px;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }

    .twinkling-star.static-glow.size-tiny {
        filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
    }

    .twinkling-star.size-small {
        width: 4.8px;
        height: 6px;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }

    .twinkling-star.static-glow.size-small {
        filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.8));
    }

    .twinkling-star.size-medium {
        width: 6.6px;
        height: 7.8px;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }

    .twinkling-star.static-glow.size-medium {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
    }

    .twinkling-star.size-large {
        width: 8.4px;
        height: 9.6px;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }

    .twinkling-star.static-glow.size-large {
        filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.8));
    }

    .twinkling-star.size-xlarge {
        width: 10.2px;
        height: 12px;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }

    .twinkling-star.static-glow.size-xlarge {
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
    }
}

/* Accessibility: Respektiere prefers-reduced-motion - Performance-optimiert mit nur 1 Layer, 2-6px Radius, 0.5-0.8 Opacity */
@media (prefers-reduced-motion: reduce) {
    .twinkling-star.animate,
    .twinkling-star.hover-star.animate {
        animation: none;
        will-change: auto;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }
}