/* Animaciones de entrada — sitio publico Invia */

/* Splash — carga inicial breve antes de las animaciones de entrada */
.invia-splash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--invia-cream, #fdfff7);
    transition: opacity 0.38s ease, visibility 0.38s ease;
}

.invia-splash.is-hiding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.invia-splash__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.invia-splash__logo {
    height: 52px;
    width: auto;
}

.invia-splash__bar {
    width: 112px;
    height: 3px;
    border-radius: 999px;
    background: rgba(0, 200, 83, 0.14);
    overflow: hidden;
}

.invia-splash__bar span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: var(--invia-green, #00c853);
}

body.invia-public--loading {
    overflow: hidden;
}

/* Ocultar contenido sin transicion mientras carga — evita flash antes del JS */
@media (prefers-reduced-motion: no-preference) {
    body.invia-public--loading:not(.invia-public--ready) .invia-main,
    body.invia-public--loading:not(.invia-public--ready) .invia-footer {
        opacity: 0;
    }

    body.invia-public--loading:not(.invia-public--ready) .invia-reveal {
        transition: none !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .invia-splash__logo {
        animation: invia-splash-pulse 0.95s ease-in-out infinite;
    }

    .invia-splash__bar span {
        animation: invia-splash-slide 0.9s ease-in-out infinite;
    }

    @keyframes invia-splash-pulse {
        0%,
        100% {
            opacity: 0.72;
            transform: scale(0.97);
        }

        50% {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes invia-splash-slide {
        0% {
            transform: translateX(-120%);
        }

        100% {
            transform: translateX(320%);
        }
    }

    /* Hero — entrada mas marcada tras el splash */
    .invia-hero .invia-reveal--up {
        transform: translateY(58px);
    }

    .invia-hero .invia-reveal--right {
        transform: translateX(72px);
    }

    .invia-hero .invia-reveal--scale {
        transform: scale(0.86);
    }

    .invia-hero .invia-reveal {
        transition-duration: 0.95s, 1s, 0.95s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .invia-splash {
        display: none !important;
    }

    body.invia-public--loading {
        overflow: auto;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .invia-reveal {
        opacity: 0;
        will-change: opacity, transform;
    }

    body.invia-public--ready .invia-reveal {
        transition:
            opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.75s ease;
        transition-delay: var(--invia-reveal-delay, 0ms);
    }

    .invia-reveal--up {
        transform: translateY(42px);
    }

    .invia-reveal--down {
        transform: translateY(-28px);
    }

    .invia-reveal--left {
        transform: translateX(-52px);
    }

    .invia-reveal--right {
        transform: translateX(52px);
    }

    .invia-reveal--scale {
        transform: scale(0.92);
    }

    .invia-reveal--fade {
        transform: none;
    }

    .invia-reveal.is-visible {
        opacity: 1;
        transform: none;
        filter: none;
    }

    /* Evita filas del footer invisibles si una animacion parcial no dispara */
    .invia-footer__top.invia-reveal:not(.is-visible),
    .invia-footer__bottom.invia-reveal:not(.is-visible),
    .invia-footer__partner-link.invia-reveal:not(.is-visible) {
        opacity: 1;
        transform: none;
        filter: none;
    }

    /* Hero — flotacion suave de la ilustracion (solo desktop, tras la entrada) */
    @media (min-width: 992px) {
        .invia-hero__visual.is-visible img {
            animation: invia-hero-float 5.5s ease-in-out 0.4s infinite;
        }
    }

    @keyframes invia-hero-float {
        0%,
        100% {
            transform: scale(1.12) translateY(0);
        }

        50% {
            transform: scale(1.12) translateY(-12px);
        }
    }

    /* Iconos de cards home — pop al aparecer */
    .invia-feature-card.is-visible .invia-feature-card__icon {
        animation: invia-icon-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        animation-delay: calc(var(--invia-reveal-delay, 0ms) + 180ms);
    }

    @keyframes invia-icon-pop {
        0% {
            transform: translate(-50%, 50%) scale(0.55);
            opacity: 0;
        }

        100% {
            transform: translate(-50%, 50%) scale(1);
            opacity: 1;
        }
    }

    /* Cards — hover sutil */
    .invia-feature-card.is-visible,
    .invia-capability-card.is-visible,
    .invia-plan-card.is-visible {
        transition:
            opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.35s ease;
    }

    .invia-feature-card.is-visible:hover,
    .invia-capability-card.is-visible:hover,
    .invia-plan-card.is-visible:hover {
        transform: translateY(-6px);
        box-shadow: 0 32px 72px rgba(3, 27, 18, 0.12);
    }

    /* Plan destacado — brillo al entrar */
    .invia-plan-card--standard.is-visible {
        animation: invia-plan-glow 0.9s ease-out forwards;
        animation-delay: var(--invia-reveal-delay, 0ms);
    }

    @keyframes invia-plan-glow {
        0% {
            box-shadow: 0 24px 60px rgba(3, 27, 18, 0.08);
        }

        45% {
            box-shadow: 0 28px 70px rgba(0, 200, 83, 0.28);
        }

        100% {
            box-shadow: 0 24px 60px rgba(3, 27, 18, 0.08);
        }
    }

    /* CTA — estrella respira al entrar en viewport */
    .invia-reveal-section.is-visible .invia-cta-bg__star {
        animation: invia-cta-star-breathe 7s ease-in-out 0.3s infinite;
    }

    @keyframes invia-cta-star-breathe {
        0%,
        100% {
            opacity: 0.88;
        }

        50% {
            opacity: 1;
        }
    }

    /* Botones — micro rebote al aparecer */
    .invia-reveal-btn.is-visible {
        animation: invia-btn-land 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
        animation-delay: calc(var(--invia-reveal-delay, 0ms) + 60ms);
    }

    @keyframes invia-btn-land {
        0% {
            transform: scale(0.88);
        }

        70% {
            transform: scale(1.04);
        }

        100% {
            transform: scale(1);
        }
    }

    /* Wizard — barra de progreso se llena */
    .invia-wizard-card.is-visible .invia-wizard-progress__segment.is-active {
        transform-origin: left center;
        animation: invia-progress-fill 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .invia-wizard-card.is-visible .invia-wizard-progress__segment.is-active:nth-child(1) { animation-delay: 0.1s; }
    .invia-wizard-card.is-visible .invia-wizard-progress__segment.is-active:nth-child(2) { animation-delay: 0.22s; }
    .invia-wizard-card.is-visible .invia-wizard-progress__segment.is-active:nth-child(3) { animation-delay: 0.34s; }
    .invia-wizard-card.is-visible .invia-wizard-progress__segment.is-active:nth-child(4) { animation-delay: 0.46s; }

    @keyframes invia-progress-fill {
        0% {
            transform: scaleX(0.3);
            opacity: 0.4;
        }

        100% {
            transform: scaleX(1);
            opacity: 1;
        }
    }

    /* Login y wizard — campos en cascada */
    .invia-login-card.is-visible .invia-input,
    .invia-login-card.is-visible .invia-btn--wide,
    .invia-wizard-card.is-visible .invia-input,
    .invia-wizard-card.is-visible .invia-btn--wide {
        animation: invia-field-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    .invia-login-card.is-visible .invia-input:nth-of-type(1) { animation-delay: 0.2s; }
    .invia-login-card.is-visible .invia-input:nth-of-type(2) { animation-delay: 0.3s; }
    .invia-login-card.is-visible .invia-btn--wide { animation-delay: 0.4s; }

    .invia-wizard-card.is-visible .invia-wizard-form .invia-input:nth-of-type(1) { animation-delay: 0.15s; }
    .invia-wizard-card.is-visible .invia-wizard-form .invia-input:nth-of-type(2) { animation-delay: 0.22s; }
    .invia-wizard-card.is-visible .invia-wizard-form .invia-input:nth-of-type(3) { animation-delay: 0.29s; }
    .invia-wizard-card.is-visible .invia-wizard-form .invia-input:nth-of-type(4) { animation-delay: 0.36s; }
    .invia-wizard-card.is-visible .invia-wizard-form .invia-input:nth-of-type(5) { animation-delay: 0.43s; }
    .invia-wizard-card.is-visible .invia-wizard-form .invia-btn--wide { animation-delay: 0.52s; }

    @keyframes invia-field-in {
        0% {
            opacity: 0;
            transform: translateY(16px);
        }

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

@media (prefers-reduced-motion: reduce) {
    .invia-reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }
}