/* ============================================
   Christmas Snow Effect - Subtle Animation
   ============================================ */

/* Snow Container - Positioned over hero section */
.snow-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

/* Snowflake Layers using pseudo-elements */
.snow-container::before,
.snow-container::after {
    content: '';
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(3px 3px at 7% 12%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 15% 6%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(4px 4px at 23% 34%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 31% 78%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 9% 45%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 42% 23%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 18% 89%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(4px 4px at 55% 67%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 27% 5%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 63% 91%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 12% 56%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 71% 29%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(4px 4px at 34% 72%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 79% 8%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 21% 83%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 87% 41%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 45% 15%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 5% 94%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 53% 38%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 92% 61%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 16% 27%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 61% 74%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(4px 4px at 38% 2%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 69% 85%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 24% 48%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 77% 19%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 48% 96%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 3% 52%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 85% 33%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 32% 69%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 90% 11%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 40% 80%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(4px 4px at 66% 44%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 11% 25%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 74% 58%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 29% 92%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 82% 16%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(4px 4px at 51% 71%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 8% 36%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 94% 87%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 36% 49%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 57% 4%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(4px 4px at 20% 63%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 88% 30%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 44% 76%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 6% 18%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 72% 54%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(4px 4px at 26% 97%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 80% 22%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 49% 65%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 13% 39%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 95% 84%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 35% 7%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 58% 51%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 22% 28%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 84% 93%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 47% 14%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(4px 4px at 10% 68%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 68% 42%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 30% 86%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 91% 20%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 39% 59%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(4px 4px at 75% 3%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 17% 75%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 83% 47%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 41% 9%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 54% 88%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(4px 4px at 19% 31%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 96% 70%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 28% 53%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 65% 17%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 33% 95%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 89% 35%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 50% 62%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 14% 24%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 70% 79%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 25% 46%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(4px 4px at 78% 1%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 43% 82%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 4% 37%, rgba(255, 255, 255, 0.6), transparent);
    background-size: 100% 100%;
    background-repeat: repeat;
    animation: snowfall-layer1 12s linear infinite;
    will-change: transform;
}

/* Second layer with different timing for depth */
.snow-container::after {
    background-image:
        radial-gradient(3px 3px at 2% 55%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 11% 21%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 19% 88%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 28% 43%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 37% 14%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 46% 77%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 52% 32%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(4px 4px at 60% 98%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 67% 26%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 73% 66%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 81% 50%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 88% 9%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(4px 4px at 93% 71%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 5% 38%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 14% 92%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 26% 57%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 35% 18%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 44% 81%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 56% 47%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 64% 3%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 76% 35%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 84% 90%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(4px 4px at 97% 62%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 8% 16%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 17% 73%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 29% 40%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 38% 95%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(4px 4px at 47% 28%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 59% 84%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 68% 52%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 77% 7%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 86% 69%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(4px 4px at 91% 33%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 3% 97%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 13% 58%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 22% 23%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 33% 78%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(4px 4px at 41% 45%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 54% 1%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 62% 36%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 70% 89%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 79% 60%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 85% 12%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 98% 75%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 6% 42%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 20% 94%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 31% 27%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(4px 4px at 40% 82%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 49% 53%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 57% 10%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 66% 65%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 74% 39%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 83% 96%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 90% 24%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 1% 87%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 10% 49%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 25% 5%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(4px 4px at 34% 70%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 43% 31%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 51% 91%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 63% 56%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 71% 19%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(4px 4px at 80% 76%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 89% 44%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 95% 2%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 4% 63%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 16% 30%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(4px 4px at 27% 86%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 39% 51%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 48% 15%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(3px 3px at 55% 72%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 69% 37%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(4px 4px at 78% 93%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 87% 59%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 92% 22%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 99% 80%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 7% 48%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 15% 11%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 24% 67%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 36% 34%, rgba(255, 255, 255, 0.6), transparent);
    animation: snowfall-layer2 15s linear infinite;
}

/* Falling animation - Layer 1 (faster) */
@keyframes snowfall-layer1 {
    0% {
        transform: translate3d(0, -10%, 0);
    }
    100% {
        transform: translate3d(5%, 110%, 0);
    }
}

/* Falling animation - Layer 2 (slower, more drift) */
@keyframes snowfall-layer2 {
    0% {
        transform: translate3d(0, -10%, 0);
    }
    100% {
        transform: translate3d(-8%, 110%, 0);
    }
}

/* Additional snowflakes for sections beyond hero */
.features-section,
.benefits-section {
    position: relative;
}

/* Responsive Design - Disable on mobile for performance */
@media (max-width: 768px) {
    .snow-container {
        display: none;
    }
}

/* Moderate animation on tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .snow-container::before,
    .snow-container::after {
        background-image:
            radial-gradient(3px 3px at 7% 12%, rgba(255, 255, 255, 0.8), transparent),
            radial-gradient(2px 2px at 23% 34%, rgba(255, 255, 255, 0.7), transparent),
            radial-gradient(3px 3px at 42% 23%, rgba(255, 255, 255, 0.9), transparent),
            radial-gradient(2px 2px at 55% 67%, rgba(255, 255, 255, 0.6), transparent),
            radial-gradient(3px 3px at 71% 29%, rgba(255, 255, 255, 0.8), transparent),
            radial-gradient(2px 2px at 12% 56%, rgba(255, 255, 255, 0.7), transparent),
            radial-gradient(3px 3px at 87% 41%, rgba(255, 255, 255, 0.9), transparent),
            radial-gradient(2px 2px at 45% 15%, rgba(255, 255, 255, 0.8), transparent),
            radial-gradient(3px 3px at 92% 61%, rgba(255, 255, 255, 0.7), transparent),
            radial-gradient(2px 2px at 16% 27%, rgba(255, 255, 255, 0.9), transparent),
            radial-gradient(3px 3px at 77% 19%, rgba(255, 255, 255, 0.6), transparent),
            radial-gradient(2px 2px at 32% 69%, rgba(255, 255, 255, 0.8), transparent),
            radial-gradient(3px 3px at 90% 11%, rgba(255, 255, 255, 0.7), transparent),
            radial-gradient(2px 2px at 66% 44%, rgba(255, 255, 255, 0.9), transparent),
            radial-gradient(3px 3px at 29% 92%, rgba(255, 255, 255, 0.8), transparent),
            radial-gradient(2px 2px at 82% 16%, rgba(255, 255, 255, 0.6), transparent),
            radial-gradient(3px 3px at 51% 71%, rgba(255, 255, 255, 0.7), transparent),
            radial-gradient(2px 2px at 8% 36%, rgba(255, 255, 255, 0.9), transparent);
    }
}

/* Accessibility - Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .snow-container::before,
    .snow-container::after {
        animation: none;
        opacity: 0.3;
    }
}

/* Performance optimization for low-end devices */
@media (hover: none) and (pointer: coarse) {
    .snow-container::before,
    .snow-container::after {
        animation-duration: 20s;
    }
}