body{
    background: #000;
}


/* Container for the snow to prevent scrollbars */
#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicking through the snow */
    z-index: -999; /* Ensures snow sits on top */
    overflow: hidden;
}

/* The actual snowflake style */
.snowflake {
    position: absolute;
    top: -10px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.8;
    pointer-events: none;
    animation: fall linear forwards;
}

/* The falling animation */
@keyframes fall {
    to {
        transform: translateY(105vh);
    }
}

/* Container for the grid */
.advent-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-auto-flow: dense;
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* The wrapper for each day */
.door-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    perspective: 1000px;
    cursor: pointer;
}

/* --- SIZE MODIFIERS --- */
.door-wrapper.box-wide {
    grid-row: span 2;
    aspect-ratio: 1 / 2.1;
}

.door-wrapper.box-huge {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
}

/* --- SHARED DOOR STYLES --- */
.door-front, .door-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* --- FRONT (Closed) --- */
.door-front {
    font-size: 2rem;
    font-weight: bold;
    border: 2px solid rgba(0,0,0,0.1);
    z-index: 2;
    transform: rotateY(0deg);
    flex-direction: column;
}

/* --- HARDCODED COLORS --- */

/* Purple - White Text */
/* Applies to both Front and Back (Content) */
.door-wrapper.style-purple .door-front,
.door-wrapper.style-purple .door-content {
    background-color: #6c55d6;
    color: white;
}

/* Yellow - Black Text */
.door-wrapper.style-yellow .door-front,
.door-wrapper.style-yellow .door-content {
    background-color: #F3EF19;
    color: black;
}

/* Green - Black Text */
.door-wrapper.style-green .door-front,
.door-wrapper.style-green .door-content {
    background-color: #ABCE2C;
    color: black;
}


.door-wrapper.style-black .door-content {
    background-color: black;
    border: 3px solid #ffffff;
    color: white !important;
}



.door-wrapper.style-black .door-front{
    background-color: #6c55d6;
    color: white !important;
}




/* If the card is purple, make the button white with purple text */
.door-wrapper.style-purple .advent-text a {
    background-color: #ffffff;
    color: #6c55d6;
}




.door-content {
    /* REMOVED background: #ecf0f1; */
    transform: rotateY(180deg);
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    cursor: zoom-in;
}

/* Standard image state (Small door) */
.door-content img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%; /* Fills the small box */
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

/* Zoomed image state */
.door-wrapper.zoomed .door-content img {
    max-width: 90%;
    /* Reduce height to make room for the text below */
    max-height: 60vh;
    transition: all 0.2s ease;
}

/* OPEN */
.door-wrapper.open .door-front {
    transform: rotateY(-180deg);
}
.door-wrapper.open .door-content {
    transform: rotateY(0deg);
}

/* LOCKED (Future) */
.door-wrapper.locked {
    cursor: not-allowed;
    /* Shows the color but grayed out */
    filter: grayscale(0.2) opacity(0.9);
}
.door-wrapper.locked .door-front {
    border-color: rgba(255,255,255,0.2);
}

/* TODAY */
.door-wrapper.today {
    z-index: 10;
}


.door-wrapper.today .door-front {
    border: 3px solid #ffffff;
}


/* PAST */
.door-wrapper.past .door-front {
    filter: brightness(1);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Responsive fix */
@media (max-width: 500px) {
    .advent-container {
        grid-template-columns: 1fr 1fr;
    }
}

.inside-date {
    position: absolute;
    top: 5px;
    right: 8px;
    font-size: 0.9rem; /* Smaller font */
    font-weight: bold;
    color: #191919; /* Dark text to contrast with light background */
    background: rgba(255, 255, 255, 0.8); /* Optional: tiny background for readability over images */
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 20; /* Ensure it sits on top of the image */
}
/* Dark background overlay */
#zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Dark dimming */
    z-index: 999; /* Below the zoomed door, above everything else */
    opacity: 0;
    pointer-events: none; /* Let clicks pass through when hidden */
    transition: opacity 0.6s ease;
}

#zoom-overlay.active {
    opacity: 1;
    pointer-events: auto; /* Catch clicks to close */
}

/* The Zoomed State for the Door */
.door-wrapper.zoomed {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    /* Center it and keep the flip if needed */
    transform: translate(-50%, -50%) !important;

    width: 80vw; /* 80% of viewport width */
    height: 80vh; /* 80% of viewport height */
    z-index: 100000;
    cursor: zoom-out;
}


/* Hide text by default (Small door view) */
.advent-text {
    display: none;
    text-align: center;
    color: black;
    font-size: clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem);;
    margin-top: 5px;
    margin-bottom: 2px;
    opacity: 0; /* Prepare for fade in */
    font-weight: bold;
}

.text-24{
    color: white;
}


.advent-text a {
    margin-top: -15px;
    font-size: 1.8rem;
    color: #FFFFFF;
    background-color: #6c55d6;
    padding: 5px;
    padding-left:15px;
    padding-right: 15px;
    border-radius: 10px;
}
.advent-text b {
    color: #6c55d6;
}


.advent-text a:hover {
    color: #191919;
}

.advent-headline{
    color: #191919;
}


/* Show text ONLY when zoomed */
.door-wrapper.zoomed .advent-text {
    display: block;
    /* Simple animation to fade in AFTER the zoom happens */
    animation: fadeInText 0.5s ease forwards;
    animation-delay: 0.3s; /* Wait for the box to finish growing */
}

@keyframes fadeInText {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}



/* Hide the small date number when zoomed in to keep it clean */
.door-wrapper.zoomed .inside-date {
    /*display: none;*/
}


/* The Placeholder (Invisible Ghost) */
.door-placeholder {
    /* Keep the grid shape */
    width: 100%;
    height: 100%;
    visibility: hidden; /* Invisible, but takes up space */
}


.advent-texthuge-box {
    /* 1. Essential properties for scrolling */
    max-height: 600px;      /* Adjust this value to fit your design */
    overflow-y: auto;       /* Adds a vertical scrollbar only when needed */
    overflow-x: hidden;     /* Prevents horizontal scrolling */

    /* 2. Aesthetic formatting to make it look nice */
    padding: 30px;          /* Adds space between text and border/scrollbar */
    text-align: left;       /* Long text is usually harder to read if centered */
    line-height: 1.5;       /* Improves readability */

    /* Optional: Visual containment */
    background-color: #F3EF19;

    border: 1px solid #ccc; /* Optional: defines the box boundaries */
    border-radius: 8px;     /* Optional: rounds the corners */

    /* Modern Scrollbar styling (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}