/* ======================================
   NAVBAR ANIMATION STYLES (PROFESIONAL)
   ====================================== */

/* TOP CONTACT BAR - Estado inicial */
.topbar-init {
    transform: translateY(-60px);
    opacity: 0;
}

/* TOP CONTACT BAR - Animación */
.topbar-enter {
    animation: topbarSlideDown 1.1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes topbarSlideDown {
    0% {
        transform: translateY(-60px);
        opacity: 0;
    }
    60% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


/* NAVBAR - Estado inicial */
header.navbar-init {
    transform: translateY(-40px);
    opacity: 0;
}

/* NAVBAR - Animación */
header.navbar-enter {
    animation: navbarSlideDown 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    animation-delay: 0.15s; /* leve diferencia para efecto elegante */
}

@keyframes navbarSlideDown {
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }
    60% {
        opacity: 0.85;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


/* ======================================
   RESPONSIVE
   ====================================== */

@media (max-width: 768px) {
    /* En móvil la animación es un poco más rápida
       para que se sienta más natural */
       
    .topbar-enter {
        animation-duration: 0.8s;
    }

    header.navbar-enter {
        animation-duration: 0.9s;
    }
}


/* ======================================
   ACCESIBILIDAD
   ====================================== */

@media (prefers-reduced-motion: reduce) {
    .topbar-enter,
    header.navbar-enter {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}