/* Animaciones de entrada — sitio publico Invia */

@media (prefers-reduced-motion: no-preference) {
    .invia-reveal {
        opacity: 0;
        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);
        will-change: opacity, transform;
    }

    .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;
    }

    /* Hero — flotacion suave de la ilustracion */
    .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: translateY(0);
        }

        50% {
            transform: translateY(-14px);
        }
    }

    /* 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;
        }
    }

    /* Inputs del formulario de contacto — cascada */
    .invia-contact__form.is-visible .invia-input,
    .invia-contact__form.is-visible .invia-btn {
        animation: invia-field-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    .invia-contact__form.is-visible .invia-contact__stack input.invia-input:nth-of-type(1) { animation-delay: 0.08s; }
    .invia-contact__form.is-visible .invia-contact__stack input.invia-input:nth-of-type(2) { animation-delay: 0.16s; }
    .invia-contact__form.is-visible .invia-contact__stack input.invia-input:nth-of-type(3) { animation-delay: 0.24s; }
    .invia-contact__form.is-visible .invia-contact__message-wrap .invia-input { animation-delay: 0.32s; }
    .invia-contact__form.is-visible > .invia-btn { animation-delay: 0.42s; }

    /* 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;
    }
}