/* snow.css (v3-light-visible) — заметно на светлой теме, но не навязчиво */

.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
}

/* Падение + ветер */
.snowflake {
    position: absolute;
    top: -80px;
    left: 0;
    user-select: none;
    pointer-events: none;

    opacity: var(--op, 0.6);
    filter: blur(var(--blur, 0px));

    animation: snow-fall var(--dur, 14s) linear var(--delay, 0s) forwards;
    will-change: transform, opacity;
}

/* Качание — отдельным слоем, чтобы не конфликтовать с transform падения */
.snowflake .snowflake-inner {
    width: 100%;
    height: 100%;
    animation: snow-sway var(--swayDur, 5.5s) ease-in-out 0s infinite alternate;
    will-change: transform;
}

/* Для светлой темы — тень чуть сильнее, чтобы читалось на белом */
.snowflake svg {
    display: block;
    width: 100%;
    height: 100%;
    filter:
            drop-shadow(0 2px 2px rgba(0,0,0,0.22))
            drop-shadow(0 0 1px rgba(0,0,0,0.18));
}

.snowflake.shake .snowflake-inner {
    animation-name: snow-sway-strong;
}

@keyframes snow-fall {
    from {
        transform: translate3d(0, 0, 0) rotate(var(--rot0, 0deg));
        opacity: var(--op, 0.6);
    }
    to {
        transform: translate3d(var(--wind, 0px), 110vh, 0) rotate(var(--rot1, 360deg));
        opacity: 0;
    }
}

@keyframes snow-sway {
    from { transform: translateX(calc(var(--sway, 10px) * -1)); }
    to   { transform: translateX(var(--sway, 10px)); }
}

@keyframes snow-sway-strong {
    from { transform: translateX(calc(var(--sway, 14px) * -1)); }
    to   { transform: translateX(var(--sway, 14px)); }
}