@keyframes patternMove {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(20px, 20px);
    }
}

/* Snowflakes */
.snowflake {
    position: fixed;
    top: -10px;
    color: white;
    font-size: 1.5em;
    text-shadow: 0 0 8px rgba(255,255,255,0.9);
    animation: fall linear infinite;
    z-index: 1;
    opacity: 0.9;
}

@keyframes fall {
    to {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0.3;
    }
}

.snowflake:nth-child(1) {
    left: 3%;
    animation-duration: 11s;
    animation-delay: 0s;
    font-size: 1.2em;
}

.snowflake:nth-child(2) {
    left: 12%;
    animation-duration: 14s;
    animation-delay: 2s;
    font-size: 1.8em;
}

.snowflake:nth-child(3) {
    left: 20%;
    animation-duration: 10s;
    animation-delay: 4s;
    font-size: 1.4em;
}

.snowflake:nth-child(4) {
    left: 28%;
    animation-duration: 13s;
    animation-delay: 1s;
    font-size: 1.6em;
}

.snowflake:nth-child(5) {
    left: 37%;
    animation-duration: 12s;
    animation-delay: 3s;
    font-size: 1.3em;
}

.snowflake:nth-child(6) {
    left: 45%;
    animation-duration: 15s;
    animation-delay: 5s;
    font-size: 1.7em;
}

.snowflake:nth-child(7) {
    left: 53%;
    animation-duration: 11s;
    animation-delay: 2s;
    font-size: 1.5em;
}

.snowflake:nth-child(8) {
    left: 62%;
    animation-duration: 14s;
    animation-delay: 4s;
    font-size: 1.4em;
}

.snowflake:nth-child(9) {
    left: 70%;
    animation-duration: 10s;
    animation-delay: 1s;
    font-size: 1.8em;
}

.snowflake:nth-child(10) {
    left: 78%;
    animation-duration: 13s;
    animation-delay: 3s;
    font-size: 1.3em;
}

.snowflake:nth-child(11) {
    left: 86%;
    animation-duration: 12s;
    animation-delay: 6s;
    font-size: 1.6em;
}

.snowflake:nth-child(12) {
    left: 94%;
    animation-duration: 15s;
    animation-delay: 0s;
    font-size: 1.5em;
}

.snowflake:nth-child(13) {
    left: 8%;
    animation-duration: 11s;
    animation-delay: 5s;
    font-size: 1.7em;
}

.snowflake:nth-child(14) {
    left: 16%;
    animation-duration: 14s;
    animation-delay: 2s;
    font-size: 1.2em;
}

.snowflake:nth-child(15) {
    left: 25%;
    animation-duration: 10s;
    animation-delay: 4s;
    font-size: 1.9em;
}

.snowflake:nth-child(16) {
    left: 33%;
    animation-duration: 13s;
    animation-delay: 1s;
    font-size: 1.4em;
}

.snowflake:nth-child(17) {
    left: 42%;
    animation-duration: 12s;
    animation-delay: 3s;
    font-size: 1.6em;
}

.snowflake:nth-child(18) {
    left: 58%;
    animation-duration: 15s;
    animation-delay: 6s;
    font-size: 1.3em;
}

.snowflake:nth-child(19) {
    left: 67%;
    animation-duration: 11s;
    animation-delay: 0s;
    font-size: 1.8em;
}

.snowflake:nth-child(20) {
    left: 75%;
    animation-duration: 14s;
    animation-delay: 5s;
    font-size: 1.5em;
}

.snowflake:nth-child(21) {
    left: 83%;
    animation-duration: 10s;
    animation-delay: 2s;
    font-size: 1.7em;
}

.snowflake:nth-child(22) {
    left: 91%;
    animation-duration: 13s;
    animation-delay: 4s;
    font-size: 1.4em;
}

/* Christmas Trees */
.christmas-tree {
    position: fixed;
    font-size: 140px;
    opacity: 0.4;
    animation: treeGlow 4s ease-in-out infinite;
    z-index: 1;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
}

    .christmas-tree.left {
        bottom: 40px;
        left: 30px;
        animation-delay: 0s;
    }

    .christmas-tree.right {
        bottom: 40px;
        right: 30px;
        animation-delay: 2s;
    }

@keyframes treeGlow {
    0%, 100% {
        opacity: 0.4;
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8));
        transform: scale(1.05);
    }
}

/* Floating Ornaments */
.ornament {
    position: fixed;
    font-size: 45px;
    animation: floatOrnament 5s ease-in-out infinite;
    z-index: 1;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

    .ornament:nth-child(23) {
        top: 12%;
        left: 8%;
        animation-delay: 0s;
    }

    .ornament:nth-child(24) {
        top: 18%;
        right: 10%;
        animation-delay: 1.5s;
    }

    .ornament:nth-child(25) {
        top: 38%;
        left: 6%;
        animation-delay: 3s;
    }

    .ornament:nth-child(26) {
        top: 45%;
        right: 12%;
        animation-delay: 2s;
    }

    .ornament:nth-child(27) {
        top: 65%;
        left: 10%;
        animation-delay: 1s;
    }

    .ornament:nth-child(28) {
        top: 72%;
        right: 8%;
        animation-delay: 2.5s;
    }

@keyframes floatOrnament {
    0%, 100% {
        transform: translateY(0) rotate(-5deg);
    }

    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

/* Christmas Lights Border */
.lights-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.light-strand {
    position: absolute;
    display: flex;
    gap: 35px;
    padding: 0 20px;
}

    .light-strand.top {
        top: 15px;
        left: 0;
        right: 0;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .light-strand.bottom {
        bottom: 15px;
        left: 0;
        right: 0;
        justify-content: space-around;
        flex-wrap: wrap;
    }

.christmas-light {
    width: 18px;
    height: 28px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 0 0 20px currentColor;
    animation: lightBlink 1.8s ease-in-out infinite;
}

    .christmas-light.red {
        background: #d32f2f;
        color: #d32f2f;
        animation-delay: 0s;
    }

    .christmas-light.gold {
        background: #ffd700;
        color: #ffd700;
        animation-delay: 0.36s;
    }

    .christmas-light.green {
        background: #388e3c;
        color: #388e3c;
        animation-delay: 0.72s;
    }

    .christmas-light.blue {
        background: #1976d2;
        color: #1976d2;
        animation-delay: 1.08s;
    }

    .christmas-light.white {
        background: #ffffff;
        color: #ffffff;
        animation-delay: 1.44s;
    }

@keyframes lightBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 20px currentColor;
    }

    50% {
        opacity: 0.3;
        transform: scale(0.9);
        box-shadow: 0 0 5px currentColor;
    }
}

/* Twinkling Stars */
.star {
    position: fixed;
    color: #ffd700;
    font-size: 28px;
    animation: starTwinkle 2.5s ease-in-out infinite;
    z-index: 1;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

    .star:nth-child(29) {
        top: 8%;
        left: 18%;
        animation-delay: 0s;
    }

    .star:nth-child(30) {
        top: 14%;
        right: 22%;
        animation-delay: 0.8s;
    }

    .star:nth-child(31) {
        top: 28%;
        left: 25%;
        animation-delay: 1.6s;
    }

    .star:nth-child(32) {
        top: 35%;
        right: 28%;
        animation-delay: 0.4s;
    }

    .star:nth-child(33) {
        top: 52%;
        left: 3%;
        animation-delay: 1.2s;
    }

    .star:nth-child(34) {
        top: 58%;
        right: 5%;
        animation-delay: 2s;
    }

    .star:nth-child(35) {
        top: 80%;
        left: 15%;
        animation-delay: 0.6s;
    }

    .star:nth-child(36) {
        top: 85%;
        right: 18%;
        animation-delay: 1.4s;
    }

@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.3) rotate(180deg);
    }
}

/* Floating Santa */
.floating-santa {
    position: absolute;
    top: -60px; /* Adjust to position Santa above the container */
    left: 50%;
    transform: translateX(-50%);
    font-size: 80px; /* Size of Santa */
    z-index: 10;
    animation: santaFloat 3s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    cursor: default;
}

@keyframes santaFloat {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-15px);
    }
}

.santa-sleigh {
    position: fixed;
    bottom: 30px;
    left: 400px; /* Start off-screen on the right */
    font-size: 55px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    z-index: 100;
    animation: santaFly 15s linear infinite;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

/* Make reindeer face RIGHT using CSS flip */
.reindeer {
    display: inline-block;
    transform: scaleX(-1);
}

/* Connectors between Santa and reindeer */
.rope {
    font-size: 30px;
    color: #f2f2f2;
    letter-spacing: -2px;
    margin: 0 4px;
}

/* Animation: right → left smooth flight */
@keyframes santaFly {
    0% {
        transform: translateX(-90vw) translateY(0);
    }

    50% {
        transform: translateX(20vw) translateY(-5px);
    }

    100% {
        transform: translateX(110vw) translateY(0);
    }
}

/* Optional pause on hover */
.santa-sleigh:hover {
    animation-play-state: paused;
    cursor: pointer;
}