/* ========================================
   JD Smart Building - Logo Color Definitions
   Centralized color scheme for brand logo
   ======================================== */

:root {
    /* Logo Theme Colors - Website ALWAYS uses light logo on dark background */
    --logo-dark-primary: #ffffff;     /* Set to white per request */
    --logo-dark-accent: #68d391;      /* Reverted to brand green per request */
    
    /* Logo Light Theme Colors (for dark backgrounds) */
    --logo-light-primary: #ffffff;    /* Set to white per request */
    --logo-light-accent: #68d391;     /* Reverted to brand green per request */
    
    /* Favicon specific aliases - Favicon still supports dark/light mode */
    --favicon-dark-fill: #1a202c;
    --favicon-light-fill: #edf2f7;
    --favicon-accent: #68d391;
}

/* Logo element styling via CSS - applied by JavaScript */
.jd-logo #roof,
.jd-logo #J,
.jd-logo #D {
    fill: var(--logo-dark-primary);
}

.jd-logo #leaf-left,
.jd-logo #leaf-right {
    fill: var(--logo-dark-accent);
}

/* Light preset for dark backgrounds */
.jd-logo.logo-light #roof,
.jd-logo.logo-light #J,
.jd-logo.logo-light #D {
    fill: var(--logo-light-primary);
}

.jd-logo.logo-light #leaf-left,
.jd-logo.logo-light #leaf-right {
    fill: var(--logo-light-accent);
}

/* Dark preset explicitly (default) */
.jd-logo.logo-dark #roof,
.jd-logo.logo-dark #J,
.jd-logo.logo-dark #D {
    fill: var(--logo-dark-primary);
}

.jd-logo.logo-dark #leaf-left,
.jd-logo.logo-dark #leaf-right {
    fill: var(--logo-dark-accent);
}

/* ========================================
   Logo Animation Styles
   ======================================== */

/* Inline logo element colors (used with logo-inline class) */
.jd-logo.logo-inline #roof,
.jd-logo.logo-inline #J,
.jd-logo.logo-inline #D {
    fill: var(--logo-dark-primary);
}

.jd-logo.logo-inline #leaf-left,
.jd-logo.logo-inline #leaf-right {
    fill: var(--logo-dark-accent);
}

@media (prefers-color-scheme: dark) {
    .jd-logo.logo-inline #roof,
    .jd-logo.logo-inline #J,
    .jd-logo.logo-inline #D {
        fill: var(--logo-light-primary);
    }
}

/* Logo entrance animations */
.jd-logo.logo-inline #roof {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: roofDrop 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.jd-logo.logo-inline #leaf-right {
    opacity: 0;
    transform: translateY(6px);
    animation: leafIn 0.5s ease forwards;
    animation-delay: 1.5s;
}

@keyframes roofDrop {
    0% {
        transform: translateY(220%);
        opacity: 0;
    }
    70% {
        transform: translateY(-8%);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

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

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .jd-logo.logo-inline #roof,
    .jd-logo.logo-inline #leaf-right {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Developer helper: disable animation with class */
.no-logo-animation .jd-logo #roof,
.no-logo-animation .jd-logo #leaf-right,
.no-logo-animation .jd-logo.logo-inline #roof,
.no-logo-animation .jd-logo.logo-inline #leaf-right {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}