/* Styles for the logo animation */

.icon-container.header-logo {
    width: 45px;
    height: 45px;
    position: relative;
    background-color: transparent; 
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 1.5s ease-in-out, translate 1.5s ease-in-out, scale 1.5s ease-in-out, rotate 1.5s ease-in-out;
    transform-origin: center; /* Ensure it expands down and to the right */
    z-index: 1100; /* Ensure it's always above the menu bar */
}

.icon-container .icon-clean,
.icon-container .icon-dirty {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default state: Clean */
.icon-container .icon-clean { opacity: 1; transform: scale(1); }
.icon-container .icon-dirty { opacity: 0; transform: scale(0.8); }

/* Animation start: show dirty then clean it */
.icon-container.animating .icon-dirty { opacity: 0; transform: scale(1.15); }
.icon-container.animating .icon-clean { opacity: 1; transform: scale(1); }

.icon-container.header-logo.logo-container-scaled {
    translate: 157.5px 157.5px;
    scale: 8;
}

.icon-container.header-logo.logo-container-scaled.rotating {
    rotate: 720deg;
}

.shaking {
    animation: shakePattern 0.15s infinite;
}

@keyframes shakePattern {
    0% { transform: translate(0, 0); }
    10% { transform: translate(3px, -4px); }
    20% { transform: translate(-2px, 5px); }
    30% { transform: translate(5px, -3px); }
    40% { transform: translate(-4px, 4px); }
    50% { transform: translate(2px, -6px); }
    60% { transform: translate(-5px, 3px); }
    70% { transform: translate(4px, -2px); }
    80% { transform: translate(-3px, 5px); }
    90% { transform: translate(1px, -4px); }
    100% { transform: translate(0, 0); }
}

/* Pre-animation reset (applied briefly via JS) */
.icon-container.animating-reset .icon-dirty { opacity: 1; transform: scale(0.9); transition: none; }
.icon-container.animating-reset .icon-clean { opacity: 0; transform: scale(0.8); transition: none; }

.star {
    position: absolute;
    opacity: 0;
    transform: scale(0.5);
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

@keyframes flashOnce {
    0%   { opacity: 0; transform: scale(0.5); }
    25%  { opacity: 1; transform: scale(1); }
    50%  { opacity: 0; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(0.5); }
}

.icon-container.animating .star {
    animation-name: flashOnce;
    animation-fill-mode: forwards;
}

#star1 { top: 10%; left: 20%; width: 6px; height: 6px; animation-delay: 0.15s; animation-duration: 1.1s; }
#star2 { top: 30%; right: 15%; width: 8px; height: 8px; animation-delay: 0.05s; animation-duration: 1.3s; }
#star3 { top: 55%; left: 5%; width: 7px; height: 7px; animation-delay: 0.3s; animation-duration: 1.0s; }
#star4 { top: 70%; left: 40%; width: 5px; height: 5px; animation-delay: 0.0s; animation-duration: 1.4s; }
#star5 { top: 20%; left: 80%; width: 7px; height: 7px; animation-delay: 0.4s; animation-duration: 0.9s; }
#star6 { bottom: 15%; right: 25%; width: 6px; height: 6px; animation-delay: 0.1s; animation-duration: 1.2s; }
#star7 { top: 40%; left: 60%; width: 9px; height: 9px; animation-delay: 0.25s; animation-duration: 1.15s; }
#star8 { top: 5%; left: 50%; width: 5px; height: 5px; animation-delay: 0.5s; animation-duration: 0.8s; }
#star9 { bottom: 45%; right: 40%; width: 8px; height: 8px; animation-delay: 0.08s; animation-duration: 1.25s; }
#star10 { top: 60%; left: 85%; width: 7px; height: 7px; animation-delay: 0.18s; animation-duration: 1.35s; }
#star11 { bottom: 25%; left: 15%; width: 6px; height: 6px; animation-delay: 0.35s; animation-duration: 1.05s; }
#star12 { bottom: 10%; right: 50%; width: 5px; height: 5px; animation-delay: 0.2s; animation-duration: 1.3s; }

/* March Animation Styles */
.march-clone {
    position: fixed;
    z-index: 2000;
    transition: left 1.5s ease-in-out, top 1.5s ease-in-out, transform 1.5s ease-in-out, scale 1.5s ease-in-out, translate 1.5s ease-in-out, rotate 1.5s ease-in-out;
    pointer-events: none;
    width: 45px;
    height: 45px;
    background-color: transparent;
    border-radius: 8px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Styles for the game mode overlay */
#game-mode-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.0); /* Transparent, but captures clicks */
    z-index: 1099; /* Below game mode icons (2000) and original logo (1100), above most other content */
    cursor: default; /* Indicate it's not interactive */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

@keyframes march-tilt {
    0% { transform: rotate(-8deg) translateY(-4px); }
    25% { transform: rotate(0deg) translateY(0px); }
    50% { transform: rotate(8deg) translateY(-4px); }
    75% { transform: rotate(0deg) translateY(0px); }
    100% { transform: rotate(-8deg) translateY(-4px); }
}

@keyframes circular-move {
    0% { transform: translate(0, 0); }
    25% { transform: translate(var(--rx), var(--ry)); }
    50% { transform: translate(calc(var(--rx) * 2), 0); }
    75% { transform: translate(var(--rx), calc(var(--ry) * -1)); }
    100% { transform: translate(0, 0); }
}

.march-clone .icon-clean, .march-clone .icon-dirty {
    width: 100%;
    height: 100%;
}