/*
 * PUBLIC BIO — TRANSICOES E ANIMACOES
 *
 * Paridade com os efeitos configuraveis no painel CENTRAL.
 * Este arquivo complementa linkhub.css sem alterar o fluxo de navegacao.
 */

.preview-anim {
    will-change: transform, opacity, filter;
    animation-fill-mode: both;
    transition: none !important;
}

/* =========================
   SAIDAS
   ========================= */

@keyframes bio-exit-slide-dissolve {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translateY(12px) scale(.98);
        filter: blur(2px);
    }
}

.exit--slide_dissolve {
    animation:
        bio-exit-slide-dissolve
        var(--anim-ms, 240ms)
        var(--anim-ease, ease)
        both;
}

@keyframes bio-exit-fade {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.exit--fade {
    animation:
        bio-exit-fade
        var(--anim-ms, 240ms)
        var(--anim-ease, ease)
        both;
}

@keyframes bio-exit-slide-up {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-18px);
    }
}

.exit--slide_up {
    animation:
        bio-exit-slide-up
        var(--anim-ms, 240ms)
        var(--anim-ease, ease)
        both;
}

/*
 * FADE ESCALONADO
 *
 * O contêiner fica visualmente estável e apenas os filhos desaparecem
 * em cascata. O passo de 90ms torna a sequência perceptível sem deixar
 * a navegação lenta.
 */
@keyframes bio-exit-stagger-host {
    from,
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes bio-exit-staggered-fade {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(7px);
    }
}

.exit--staggered_fade {
    animation:
        bio-exit-stagger-host
        calc(var(--anim-ms, 320ms) + 450ms)
        linear
        both;
}

.exit--staggered_fade > * {
    animation:
        bio-exit-staggered-fade
        var(--anim-ms, 320ms)
        var(--anim-ease, ease)
        both;
}

.exit--staggered_fade > *:nth-child(1) { animation-delay: 0ms; }
.exit--staggered_fade > *:nth-child(2) { animation-delay: 90ms; }
.exit--staggered_fade > *:nth-child(3) { animation-delay: 180ms; }
.exit--staggered_fade > *:nth-child(4) { animation-delay: 270ms; }
.exit--staggered_fade > *:nth-child(5) { animation-delay: 360ms; }
.exit--staggered_fade > *:nth-child(n + 6) { animation-delay: 450ms; }

@keyframes bio-exit-scale-blur {
    from {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: scale(.96);
        filter: blur(3px);
    }
}

.exit--scale_blur {
    animation:
        bio-exit-scale-blur
        var(--anim-ms, 240ms)
        var(--anim-ease, ease)
        both;
}

@keyframes bio-exit-glass-fold {
    from {
        opacity: 1;
        transform:
            perspective(600px)
            rotateX(0deg)
            translateY(0);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform:
            perspective(600px)
            rotateX(-14deg)
            translateY(10px)
            scale(.98);
        filter: blur(2px);
    }
}

.exit--glass_fold {
    transform-origin: center top;
    animation:
        bio-exit-glass-fold
        var(--anim-ms, 240ms)
        var(--anim-ease, ease)
        both;
}

/* =========================
   ENTRADAS
   ========================= */

@keyframes bio-entry-cards-pop {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(.96);
    }

    70% {
        opacity: 1;
        transform: translateY(-2px) scale(1.012);
    }

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

.entry--cards_pop {
    animation:
        bio-entry-cards-pop
        var(--anim-ms, 240ms)
        var(--anim-ease, ease)
        both;
}

.entry--cards_pop > * {
    animation:
        bio-entry-cards-pop
        var(--anim-ms, 240ms)
        var(--anim-ease, ease)
        both;
}

.entry--cards_pop > *:nth-child(2) { animation-delay: 45ms; }
.entry--cards_pop > *:nth-child(3) { animation-delay: 90ms; }
.entry--cards_pop > *:nth-child(4) { animation-delay: 135ms; }
.entry--cards_pop > *:nth-child(5) { animation-delay: 180ms; }
.entry--cards_pop > *:nth-child(n + 6) { animation-delay: 225ms; }

@keyframes bio-entry-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.entry--fade {
    animation:
        bio-entry-fade
        var(--anim-ms, 240ms)
        var(--anim-ease, ease)
        both;
}

@keyframes bio-entry-slide-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.entry--slide_up {
    animation:
        bio-entry-slide-up
        var(--anim-ms, 240ms)
        var(--anim-ease, ease)
        both;
}

@keyframes bio-entry-slide-up-overshoot {
    0% {
        opacity: 0;
        transform: translateY(28px) scale(.985);
    }

    72% {
        opacity: 1;
        transform: translateY(-4px) scale(1.008);
    }

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

.entry--slide_up_overshoot {
    animation:
        bio-entry-slide-up-overshoot
        var(--anim-ms, 240ms)
        var(--anim-ease, ease)
        both;
}

@keyframes bio-entry-flip {
    0% {
        opacity: 0;
        transform:
            perspective(700px)
            rotateX(14deg)
            translateY(8px);
    }

    100% {
        opacity: 1;
        transform:
            perspective(700px)
            rotateX(0deg)
            translateY(0);
    }
}

.entry--flip {
    transform-origin: center top;
    backface-visibility: hidden;
    animation:
        bio-entry-flip
        var(--anim-ms, 240ms)
        var(--anim-ease, ease)
        both;
}

@keyframes bio-entry-morph-cta {
    0% {
        opacity: 0;
        transform: scale(.88);
        border-radius: 999px;
        filter: blur(3px);
    }

    60% {
        opacity: 1;
        transform: scale(1.025);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        border-radius: var(--radius, 12px);
    }
}

.entry--morph_cta {
    animation:
        bio-entry-morph-cta
        var(--anim-ms, 240ms)
        var(--anim-ease, ease)
        both;
}

/* Compatibilidade com perfil legado. */
.entry--slide_dissolve {
    animation:
        bio-entry-slide-up
        var(--anim-ms, 240ms)
        var(--anim-ease, ease)
        both;
}

@media (prefers-reduced-motion: reduce) {
    main[role="main"]:not([data-anim-reduce="off"])
    .preview-anim,
    main[role="main"]:not([data-anim-reduce="off"])
    .preview-anim > * {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
    }
}