/* Christmas easter egg, only loaded for /?christmas=true. */

#christmas-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 50;
    cursor: pointer;
}

#christmas-overlay.visible {
    opacity: 1;
    visibility: visible;
}

#christmas-overlay .christmas-card {
    cursor: default;
}

body.overlay-visible {
    overflow: hidden;
}

/* Falling snow; flakes are created by christmas.js with their own size, speed and drift. */
.snowflakes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.snowflake {
    position: absolute;
    top: -2rem;
    color: white;
    user-select: none;
    animation: snowfall linear infinite;
}

@keyframes snowfall {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(var(--drift, 20px), 110vh) rotate(360deg); }
}

/* A burst of snow where the overlay is tapped. */
.snow-burst {
    position: absolute;
    color: white;
    pointer-events: none;
    animation: burst 1.2s ease-out forwards;
}

@keyframes burst {
    from { transform: translate(0, 0) scale(1); opacity: 1; }
    to { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; }
}

/* Santa's sleigh crossing the sky now and then. */
.sleigh {
    position: absolute;
    top: 12%;
    left: -12rem;
    font-size: 2rem;
    white-space: nowrap;
    pointer-events: none;
    transform: scaleX(-1); /* emoji face left; mirrored, the reindeer lead */
    animation: sleigh 14s linear 2s infinite;
}

@keyframes sleigh {
    0% { left: -12rem; top: 14%; }
    45% { top: 8%; }
    60% { left: calc(100% + 12rem); top: 12%; }
    100% { left: calc(100% + 12rem); top: 12%; }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fade-in 1s ease-out forwards;
}

.animate-fade-in-delay {
    animation: fade-in 1s ease-out 0.5s forwards;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .snowflake, .snow-burst, .sleigh {
        display: none;
    }
    .animate-fade-in, .animate-fade-in-delay {
        animation: none;
        opacity: 1;
    }
}