/* --- GENERAL UTILS --- */
.fade-out {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 1.5s ease-out; /* Duração do fade do amarelo para vermelho */
}

/* --- INTRO ANIMATIONS --- */

/* 1. Menu Items: Left to Right */
@keyframes introSlideInLeft {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1 !important; /* Força final visível */
    }
}

/* 2. Logo: Bottom to Up */
@keyframes introSlideUp {
    0% {
        transform: translate(-50%, 100px); /* Mantém centralizado X, desce Y */
        opacity: 0;
    }
    100% {
        transform: translate(-50%, 0);
        opacity: 1 !important; /* Força final visível */
    }
}

/* 3. Search Bar: Top to Down */
@keyframes introSlideDown {
    0% {
        transform: translate(-50%, -100px); /* Mantém centralizado X, sobe Y */
        opacity: 0;
    }
    100% {
        transform: translate(-50%, 0);
        opacity: 1 !important; /* Força final visível */
    }
}

/* Classes applied by JS */
.anim-intro-menu {
    animation: introSlideInLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    will-change: transform, opacity;
}

.anim-intro-logo {
    animation: introSlideUp 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    will-change: transform, opacity;
}

.anim-intro-search {
    animation: introSlideDown 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    will-change: transform, opacity;
}

/* --- NAVIGATION ANIMATIONS (Existing) --- */
@keyframes slideLeftOut {
    to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slideRightIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.anim-slide-left-out {
    animation: slideLeftOut 0.5s forwards var(--easing);
}

.anim-slide-right-in {
    animation: slideRightIn 0.5s forwards var(--easing);
}

.anim-fade-in {
    animation: fadeIn 0.8s forwards ease;
}