/* Animated Logo Styles - Used for header logos with effects */
/* Based on newlogowitheffects.html */

.animated-logo-container {
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: relative;
    transition: transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Physical "thud" effect when clicking */
.animated-logo-container:active {
    transform: scale(0.92);
}

.animated-logo-container svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.animated-logo-container .side {
    fill: currentColor;
    opacity: 0;
    transform-origin: 50px 50px;
    /* Smooth transitions for assembly and hover */
    transition: 
        opacity 0.6s ease, 
        transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        filter 0.3s ease;
}

/* Initial/Exit State: Dispersed and rotated */
.animated-logo-container #side-1 { transform: rotate(0deg) translateY(30px) scale(0.5); }
.animated-logo-container #side-2 { transform: rotate(120deg) translateY(30px) scale(0.5); }
.animated-logo-container #side-3 { transform: rotate(240deg) translateY(30px) scale(0.5); }

/* Assembled State */
.animated-logo-container.active .side {
    opacity: 1;
}
.animated-logo-container.active #side-1 { transform: rotate(0deg) translateY(0) scale(1); }
.animated-logo-container.active #side-2 { transform: rotate(120deg) translateY(0) scale(1); }
.animated-logo-container.active #side-3 { transform: rotate(240deg) translateY(0) scale(1); }

/* --- HOVER PULSE EFFECT --- */
.animated-logo-container:hover .side {
    filter: drop-shadow(0 0 15px currentColor);
    animation: logo-pulse-glow 1.5s infinite ease-in-out;
}

@keyframes logo-pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 10px currentColor); }
    50% { filter: drop-shadow(0 0 25px currentColor); }
}

/* --- CLICK BURST EFFECT --- */
.animated-logo-container.burst .side {
    transition: all 0.5s cubic-bezier(0.1, 0.9, 0.2, 1);
    opacity: 0 !important;
    filter: blur(8px) brightness(3); /* Makes it look like light energy */
}

.animated-logo-container.burst #side-1 { transform: rotate(45deg) translateY(-150px) scale(1.5); }
.animated-logo-container.burst #side-2 { transform: rotate(165deg) translateY(-150px) scale(1.5); }
.animated-logo-container.burst #side-3 { transform: rotate(285deg) translateY(-150px) scale(1.5); }

/* Footer Logo - Larger with more dramatic effect */
.footer-animated-logo {
    width: 48px;
    height: 48px;
}

.footer-animated-logo:hover .side {
    filter: drop-shadow(0 0 15px currentColor);
    animation: footer-logo-pulse 1.5s infinite ease-in-out;
}

@keyframes footer-logo-pulse {
    0%, 100% { filter: drop-shadow(0 0 10px currentColor); }
    50% { filter: drop-shadow(0 0 25px currentColor); }
}

.footer-animated-logo.burst #side-1 { transform: rotate(45deg) translateY(-150px) scale(1.8); }
.footer-animated-logo.burst #side-2 { transform: rotate(165deg) translateY(-150px) scale(1.8); }
.footer-animated-logo.burst #side-3 { transform: rotate(285deg) translateY(-150px) scale(1.8); }

/* Theme-aware colors driven by container color */
:root {
    --logo-light: #0f172a;
    --logo-dark: #ffffff;
}

.animated-logo-container {
    color: var(--logo-light);
}

/* Light surfaces: keep dark logo for contrast */
header .animated-logo-container,
.landing-header .animated-logo-container {
    color: var(--logo-light);
}

/* Dark theme toggle support */
[data-theme="dark"] .animated-logo-container,
.dark-mode .animated-logo-container,
header.dark .animated-logo-container {
    color: var(--logo-dark);
}

/* Footer logo - dark on light backgrounds for visibility */
.landing-footer .animated-logo-container,
.site-footer .animated-logo-container {
    color: var(--logo-light);
}

/* Dark theme footer - white logo */
[data-theme="dark"] .landing-footer .animated-logo-container,
[data-theme="dark"] .site-footer .animated-logo-container,
.dark-mode .landing-footer .animated-logo-container,
.dark-mode .site-footer .animated-logo-container {
    color: var(--logo-dark);
}