/* Header Animation */
.animate-gradient-text {
    animation: gradient-shift 3s linear infinite;
}
@keyframes gradient-shift {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Marquee Layout */
.marquee-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.marquee-track {
    display: flex;
    width: max-content;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    gap: 80px; /* Increased gap for better pop-up spacing */
    will-change: transform;
    padding: 40px 0; /* Added vertical padding so logos don't get clipped when scaling */
}

/* Row Directions */
.track-left { animation: scroll-left-center 50s linear infinite; }
.track-right { animation: scroll-right-center 60s linear infinite; }

/* Logo Styling & Default State (Dimmed/Smaller) */
.logo-card-glow {
    width: 160px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy pop effect */
}

.logo-card-glow img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.3; /* Dimmed by default */
    filter: grayscale(100%); /* B&W by default */
    transition: all 0.6s ease;
    transform: scale(0.9);
}

/* The "Middle" Pop-up State */
.marquee-item.is-active .logo-card-glow img {
    opacity: 1;
    filter: grayscale(0%) drop-shadow(0 10px 20px rgba(228, 0, 43, 0.3));
    transform: scale(1.4); /* Make it bigger */
}

/* Seamless Loop Animations */
@keyframes scroll-left-center { 
    0% { transform: translateX(-50%); } 
    100% { transform: translateX(-100%); } 
}

@keyframes scroll-right-center { 
    0% { transform: translateX(-50%); } 
    100% { transform: translateX(0%); } 
}

/* Pause on hover */
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}