/* Январь: редкая падающая звезда (комета) */

#januaryShootingStarLayer {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.jan-shooting-star {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    width: 1px;
    height: 1px;
    will-change: transform, opacity;
}

.jan-star-head {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 55% 45%,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.95) 15%,
            var(--star-color) 55%,
            rgba(255, 255, 255, 0.3) 80%,
            transparent 100%);
    box-shadow:
        0 0 4px #ffffff,
        0 0 10px var(--star-color),
        0 0 25px var(--star-color),
        0 0 50px var(--star-glow),
        0 0 90px var(--star-glow),
        0 0 140px var(--star-glow),
        0 0 200px rgba(255, 255, 255, 0.6);
    transform: translate(-50%, -50%) scaleX(1.5);
    animation: janHeadPulse 0.15s ease-out forwards;
    z-index: 2;
}

@keyframes janHeadPulse {
    0% {
        transform: translate(-50%, -50%) scaleX(1.5) scale(0.3);
        opacity: 0;
    }
    40% {
        transform: translate(-50%, -50%) scaleX(1.5) scale(1.6);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scaleX(1.5) scale(1);
        opacity: 1;
    }
}

.jan-star-tail {
    position: absolute;
    top: 50%;
    right: 50%;
    width: 280px;
    height: 4px;
    transform: translateY(-50%);
    background: linear-gradient(to left,
            var(--star-color) 0%,
            rgba(255, 255, 255, 0.9) 8%,
            var(--star-color) 25%,
            rgba(255, 255, 255, 0.5) 50%,
            transparent 100%);
    border-radius: 3px;
    filter: blur(0.5px);
    z-index: 1;
    animation: janTailGlow 0.2s ease-out forwards;
}

@keyframes janTailGlow {
    0% {
        opacity: 0;
        width: 0;
    }
    60% {
        opacity: 1;
        width: 310px;
    }
    100% {
        opacity: 1;
        width: 280px;
    }
}

.jan-star-tail-glow {
    position: absolute;
    top: 50%;
    right: 50%;
    width: 260px;
    height: 12px;
    transform: translateY(-50%);
    background: linear-gradient(to left,
            rgba(255, 255, 255, 0.7) 0%,
            var(--star-glow) 15%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 100%);
    border-radius: 8px;
    filter: blur(8px);
    z-index: 0;
    animation: janTailGlowSoft 0.25s ease-out forwards;
}

@keyframes janTailGlowSoft {
    0% {
        opacity: 0;
        width: 0;
    }
    70% {
        opacity: 0.8;
        width: 290px;
    }
    100% {
        opacity: 0.55;
        width: 260px;
    }
}

.jan-star-spark {
    position: absolute;
    border-radius: 50%;
    background: #ffffff;
    pointer-events: none;
    z-index: 3;
    animation: janSparkFly var(--spark-dur, 0.9s) ease-out forwards;
    animation-delay: var(--spark-delay, 0s);
    box-shadow:
        0 0 3px #ffffff,
        0 0 8px var(--star-color),
        0 0 16px var(--star-glow);
}

@keyframes janSparkFly {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 1;
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(var(--spark-dx-1), var(--spark-dy-1)) scale(1.3);
    }
    100% {
        transform: translate(-50%, -50%) translate(var(--spark-dx-2), var(--spark-dy-2)) scale(0);
        opacity: 0;
    }
}

@keyframes janStarFlight {
    0% {
        transform: rotate(var(--angle)) translateX(0);
        opacity: 0;
    }
    4% {
        opacity: 1;
    }
    12% {
        opacity: 1;
        filter: brightness(1.4);
    }
    65% {
        opacity: 0.9;
        filter: brightness(1);
    }
    92% {
        opacity: 0.25;
    }
    100% {
        transform: rotate(var(--angle)) translateX(var(--travel));
        opacity: 0;
        filter: brightness(0.6);
    }
}

.jan-star-mist {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.5) 0%,
            var(--star-glow) 30%,
            transparent 70%);
    filter: blur(20px);
    transform: translate(-50%, -50%);
    z-index: 0;
    animation: janMistFade 2.8s ease-out forwards;
    pointer-events: none;
}

@keyframes janMistFade {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }
    15% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    #januaryShootingStarLayer {
        display: none;
    }
}