/* =============================================
   LOGO ANIMATION - Permanent Display with Color Cycling
   No exit animation - logo stays visible
   Only slide in once, then stay
   ============================================= */

/* Base Logo Image */
.animated-logo-img {
    height: 50px;
    width: auto;
    display: block;
}

/* ============================================= 
   ONE-TIME SLIDE IN - Then Stay Forever
   ============================================= */
.animated-logo-img {
    animation: logoSlideIn 0.8s ease-out forwards;
}

@keyframes logoSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================= 
   COLOR VARIATIONS (6 styles)
   Colors cycle automatically via JavaScript
   ============================================= */

/* 1. White (Default) */
.animated-logo-img.logo-color-white {
    /* Original white */
}

/* 2. Orange */
.animated-logo-img.logo-color-orange {
    filter: invert(59%) sepia(84%) saturate(1784%) hue-rotate(358deg) brightness(101%) contrast(104%);
}

/* 3. Blue */
.animated-logo-img.logo-color-blue {
    filter: invert(39%) sepia(92%) saturate(2451%) hue-rotate(195deg) brightness(98%) contrast(101%);
}

/* 4. Green */
.animated-logo-img.logo-color-green {
    filter: invert(71%) sepia(53%) saturate(484%) hue-rotate(71deg) brightness(93%) contrast(89%);
}

/* 5. Purple */
.animated-logo-img.logo-color-purple {
    filter: invert(31%) sepia(89%) saturate(3208%) hue-rotate(266deg) brightness(91%) contrast(99%);
}

/* 6. RGB Neon Light with subtle pulsing */
.animated-logo-img.logo-color-neon {
    animation: neonPulse 3s ease-in-out infinite;
}

@keyframes neonPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 8px #ff0000) drop-shadow(0 0 12px #00ff00) drop-shadow(0 0 16px #0000ff);
    }

    33% {
        filter: drop-shadow(0 0 12px #ff0000) drop-shadow(0 0 8px #00ff00) drop-shadow(0 0 12px #0000ff);
    }

    66% {
        filter: drop-shadow(0 0 8px #ff0000) drop-shadow(0 0 16px #00ff00) drop-shadow(0 0 10px #0000ff);
    }
}

/* ============================================= 
   HOVER EFFECTS
   ============================================= */
.animated-logo-img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* ============================================= 
   RESPONSIVE SIZING
   ============================================= */
@media (max-width: 768px) {
    .animated-logo-img {
        height: 40px;
    }
}

@media (max-width: 480px) {
    .animated-logo-img {
        height: 35px;
    }
}