/* =====================================================================
   assets/css/animations.css — Grupo Inon Landing Theme
   Microinteracciones y animaciones de entrada (scroll)
   Sin dependencias externas · Respeta prefers-reduced-motion
===================================================================== */

/* ─── FADE-UP ON SCROLL ──────────────────────────────────────────────────── */
.inon-fade-up { opacity: 1; }
.inon-fade-up.is-visible { animation: inonFadeUp 0.55s ease forwards; }
@keyframes inonFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── FADE IN ────────────────────────────────────────────────────────────── */
.inon-fade-in { opacity: 1; }
.inon-fade-in.is-visible { animation: inonFadeIn 0.5s ease forwards; }
@keyframes inonFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── SLIDE-IN DESDE IZQUIERDA ───────────────────────────────────────────── */
.inon-slide-left { opacity: 1; }
.inon-slide-left.is-visible { animation: inonSlideLeft 0.55s ease forwards; }
@keyframes inonSlideLeft {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── SLIDE-IN DESDE DERECHA ─────────────────────────────────────────────── */
.inon-slide-right { opacity: 1; }
.inon-slide-right.is-visible { animation: inonSlideRight 0.55s ease forwards; }
@keyframes inonSlideRight {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── PULSO SUAVE (para CTAs o badges) ──────────────────────────────────── */
@keyframes inon-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232,93,4,0.4); }
    50%       { box-shadow: 0 0 0 10px rgba(232,93,4,0); }
}
.btn-primary { animation: inon-pulse 3s ease-in-out infinite; }
.btn-primary:hover { animation: none; }

/* ─── NÚMERO CONTADOR ────────────────────────────────────────────────────── */
.why-number { display: inline-block; }
.why-number.counting { opacity: 0; animation: count-appear 0.4s ease forwards; }
@keyframes count-appear { to { opacity: 1; } }

/* ─── HOVER EN TARJETAS (ya en style.css, refuerzo aquí) ────────────────── */
.service-card,
.sector-card,
.project-card,
.testimonial-card {
    will-change: transform, box-shadow;
}

/* ─── BARRA DE NAVEGACIÓN: efecto deslizante ─────────────────────────────── */
#inon-header {
    transition: box-shadow 0.3s ease, top 0.3s ease, background-color 0.3s ease;
}

/* ─── TOPBAR: animación entrada ──────────────────────────────────────────── */
#inon-topbar {
    animation: slideDownTopbar 0.5s ease forwards;
}
@keyframes slideDownTopbar {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ─── HAMBURGER: animación a X ───────────────────────────────────────────── */
.nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ─── HERO: animación de entrada de contenido ────────────────────────────── */
#inon-hero .hero-badge {
    animation: fadeInDown 0.6s ease 0.1s both;
}
#inon-hero h1 {
    animation: fadeInDown 0.6s ease 0.2s both;
}
#inon-hero .hero-sub {
    animation: fadeInDown 0.6s ease 0.35s both;
}
#inon-hero .hero-actions {
    animation: fadeInDown 0.6s ease 0.5s both;
}
#inon-hero .hero-trust {
    animation: fadeInDown 0.6s ease 0.65s both;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── FORMULARIO: focus highlight ────────────────────────────────────────── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    transform: translateY(-1px);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

/* ─── BACK TO TOP ────────────────────────────────────────────────────────── */
#back-to-top {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.25s ease, background-color 0.25s ease;
}

/* ─── RESPETO prefers-reduced-motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .inon-fade-up,
    .inon-fade-in,
    .inon-slide-left,
    .inon-slide-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .btn-primary {
        animation: none;
    }
    #inon-hero .hero-badge,
    #inon-hero h1,
    #inon-hero .hero-sub,
    #inon-hero .hero-actions,
    #inon-hero .hero-trust {
        animation: none;
        opacity: 1;
        transform: none;
    }
}