/* ============================================================
   Animaciones globales del sitio
   ============================================================ */

/* --- Keyframes --- */
@keyframes anim-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes anim-fade-right {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes anim-pop {
    0%   { opacity: 0; transform: scale(.4); }
    70%  { opacity: 1; transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes anim-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

@keyframes anim-shine {
    from { background-position: 200% center; }
    to   { background-position: -200% center; }
}

/* --- Entrada al cargar la página (con retardo escalonado opcional) --- */
.anim-fade-up   { opacity: 0; animation: anim-fade-up .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0s); }
.anim-fade-right{ opacity: 0; animation: anim-fade-right .7s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0s); }
.anim-pop       { opacity: 0; animation: anim-pop .5s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: var(--d, 0s); }
.anim-float     { animation: anim-float 6s ease-in-out infinite; }
.anim-float-slow{ animation: anim-float 9s ease-in-out infinite; }

/* --- Revelado al hacer scroll (lo activa el IntersectionObserver de site.js).
       Se usa animación con relleno "backwards" (no "forwards") para que, al
       terminar, el elemento quede libre y sus transiciones de hover funcionen. --- */
.reveal {
    opacity: 0;
}

.reveal.reveal-visible {
    opacity: 1;
    animation: anim-fade-up .7s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: var(--d, 0s);
}

/* --- Bolas de números: aparición con rebote escalonado --- */
.ball-pop {
    opacity: 0;
    animation: anim-pop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}

.ball-pop:nth-child(1) { animation-delay: .05s; }
.ball-pop:nth-child(2) { animation-delay: .15s; }
.ball-pop:nth-child(3) { animation-delay: .25s; }
.ball-pop:nth-child(4) { animation-delay: .35s; }
.ball-pop:nth-child(5) { animation-delay: .45s; }
.ball-pop:nth-child(6) { animation-delay: .55s; }

/* --- Subrayado animado de los enlaces del menú --- */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to right, #2563eb, #4f46e5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.nav-link:hover::after {
    transform: scaleX(1);
}

/* --- Brillo que recorre texto (títulos degradados) --- */
.text-shine {
    background: linear-gradient(110deg, #fff 40%, #93c5fd 50%, #fff 60%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: anim-shine 4s linear infinite;
}

/* --- Accesibilidad: sin animaciones si el usuario las tiene reducidas --- */
@media (prefers-reduced-motion: reduce) {
    .anim-fade-up, .anim-fade-right, .anim-pop, .ball-pop {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .anim-float, .anim-float-slow, .text-shine {
        animation: none;
    }

    .reveal, .reveal.reveal-visible {
        opacity: 1;
        animation: none;
    }
}