/* Container to hold the stacked images */
.logo-container {
    position: relative;
    width: 160px; /* Adjust to your logo size */
    height: 65px; /* Adjust to your logo size */
    display: flex;
    justify-content: center;
    align-items: center;

    /* --- NEW HOVER STYLES (Tailwind equivalents) --- */
    /* transition-transform duration-200 ease-in-out */
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer; /* Optional: indicates it's interactive */
}
    /* hover:scale-125 */
    .logo-container:hover {
        transform: scale(1.25);
    }

.logo {
    position: absolute;
    width: 100%;
    height: auto;
    transition: all 1s ease;
    backface-visibility: hidden; /* Keeps rendering crisp */
    padding-bottom: 5px;
}

    /* STATE 1: Standard Logo (Default)
       Visible by default.
    */
    .logo.standard {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) blur(0px);
    }

    /* STATE 2: Christmas Logo (Default)
       Hidden by default.
    */
    .logo.xmas {
        opacity: 0;
        transform: scale(0.5); /* Starts small */
        filter: brightness(10) blur(10px); /* Starts as a ball of light */
    }

/* --- THE MAGICAL TRIGGER CLASS --- */

/* When 'is-december' is active, HIDE the standard logo with a flash */
.is-december .logo.standard {
    animation: magicExit 1.5s forwards;
}

/* When 'is-december' is active, SHOW the xmas logo with a settle effect */
.is-december .logo.xmas {
    animation: magicEnter 1.5s forwards;
    animation-delay: 0.9s; /* Wait for the standard logo to flash first */
}

/* Sparkle decoration (Optional: Adds a glow behind) */
.logo-container::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, gold 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    z-index: -1;
    transition: opacity 1s;
}

.is-december::before {
    animation: sparkleBurst 1s ease-out 0.9s;
}

/* --- KEYFRAMES FOR THE MAGIC --- */

@keyframes magicExit {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) blur(0);
    }

    50% {
        /* The Flash: Bright, blurry, and slightly larger */
        opacity: 1;
        transform: scale(1.1);
        filter: brightness(10) blur(5px) hue-rotate(45deg);
    }

    100% {
        /* Poof: Gone */
        opacity: 0;
        transform: scale(1.2);
        filter: brightness(20) blur(10px);
    }
}

@keyframes magicEnter {
    0% {
        opacity: 0;
        transform: scale(0.2);
        filter: brightness(10) blur(10px);
    }

    50% {
        opacity: 1;
        filter: brightness(2); /* Still glowing a bit */
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) blur(0);
    }
}

@keyframes sparkleBurst {
    0% {
        transform: scale(0);
        opacity: 1;
        box-shadow: 0 0 20px 10px gold;
    }

    100% {
        transform: scale(5);
        opacity: 0;
        box-shadow: 0 0 0px 0px gold;
    }
}


/* --- STATE 3: Easter Logo (Default) --- 
   Hidden by default, matching the xmas starting state.
*/
.logo.easter {
    opacity: 0;
    transform: scale(0.5);
    filter: brightness(10) blur(10px);
}

/* --- THE EASTER TRIGGER CLASSES --- */

/* When 'is-april' is active, HIDE the standard logo with a flash */
.is-april .logo.standard {
    animation: magicExit 1.5s forwards;
}

/* When 'is-april' is active, SHOW the easter logo with a settle effect */
.is-april .logo.easter {
    animation: magicEnter 1.5s forwards;
    animation-delay: 0.9s;
}

/* Trigger the same sparkle decoration for Easter */
.is-april::before {
    animation: sparkleBurst 1s ease-out 0.9s;
}


/* --- STATE 4: Anzac Logo (Default) --- 
   Hidden by default, matching the xmas starting state.
*/
.logo.anzac {
    opacity: 0;
    transform: scale(0.5);
    filter: brightness(10) blur(10px);
}

/* --- THE ANZAC TRIGGER CLASSES --- */

/* When 'is-april' is active, HIDE the standard logo with a flash */
.is-anzac .logo.standard {
    animation: magicExit 1.5s forwards;
}

/* When 'is-april' is active, SHOW the easter logo with a settle effect */
.is-anzac .logo.anzac {
    animation: magicEnter 1.5s forwards;
    animation-delay: 0.9s;
}

/* Trigger the same sparkle decoration for Easter */
.is-anzac::before {
    animation: sparkleBurst 1s ease-out 0.9s;
}

/* --- STATE 5: Anzac Logo (Default) --- 
   Hidden by default, matching the xmas starting state.
*/
.logo.matariki {
    opacity: 0;
    transform: scale(0.5);
    /*filter: brightness(10) blur(10px);*/
}

/* --- THE ANZAC TRIGGER CLASSES --- */

/* When 'is-april' is active, HIDE the standard logo with a flash */
.is-matariki .logo.standard {
    animation: magicExit 1.5s forwards;
}

/* When 'is-april' is active, SHOW the easter logo with a settle effect */
.is-matariki .logo.matariki {
    animation: magicEnter 1.5s forwards;
    animation-delay: 0.9s;
}

/* Trigger the same sparkle decoration for Easter */
.is-matariki::before {
    animation: sparkleBurst 1s ease-out 0.9s;
}

/* Ensure the video element respects the 160x80 container bounds */
video.logo {
    height: 100%;
    object-fit: fill ;
    border-radius: 10px;
    overflow: hidden;
    padding-bottom: 0px;
}