/**
 * Motion / microinteracciones (validación local)
 * Depende de clases .reveal / .reveal-stagger (JS en main.js en shell marketing).
 */

/* --- 1) Microinteracciones CTAs / navegación (transform + opacity) --- */
.btn-primary {
    transition: transform 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-neutral,
.btn-cta-gold-header {
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.btn-neutral:hover,
.btn-cta-gold-header:hover {
    transform: translateY(-2px);
}

.btn-neutral:active,
.btn-cta-gold-header:active {
    transform: translateY(0) scale(0.99);
}

.main-header .nav-link {
    transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
}

.main-header .nav-link:hover {
    transform: translateY(-1px);
}

.main-header .dropdown-item {
    transition: transform 0.2s ease, padding-left 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.main-header .dropdown-item:hover {
    transform: translateX(4px);
}

.mobile-nav-link {
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.mobile-nav-link:active {
    transform: translateX(4px);
}

/* --- 2) Focus visible (teclado / accesibilidad) --- */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid rgba(0, 220, 255, 0.95);
    outline-offset: 3px;
}

.btn-primary:focus-visible,
.btn-neutral:focus-visible,
.btn-cta-gold-header:focus-visible {
    outline-color: #ffd700;
}

/* --- 3) Entrada al scroll ---
   Solo opacidad: no pisar `transform` de secciones full-bleed (.text-scrolly-section, etc.). */
.reveal {
    opacity: 0;
    transition: opacity 0.65s ease;
    will-change: opacity;
}

.reveal.is-visible {
    opacity: 1;
}

/* --- 4) Stagger: columnas de footer con .footer-links --- */
.reveal-stagger ul.footer-links > li {
    opacity: 0;
    transform: translateY(10px);
}

.reveal-stagger.is-visible ul.footer-links > li {
    animation: motionStaggerIn 0.45s ease forwards;
}

.reveal-stagger.is-visible ul.footer-links > li:nth-child(1) {
    animation-delay: 0.04s;
}

.reveal-stagger.is-visible ul.footer-links > li:nth-child(2) {
    animation-delay: 0.1s;
}

.reveal-stagger.is-visible ul.footer-links > li:nth-child(3) {
    animation-delay: 0.16s;
}

.reveal-stagger.is-visible ul.footer-links > li:nth-child(4) {
    animation-delay: 0.22s;
}

.reveal-stagger.is-visible ul.footer-links > li:nth-child(5) {
    animation-delay: 0.28s;
}

.reveal-stagger.is-visible ul.footer-links > li:nth-child(6) {
    animation-delay: 0.34s;
}

.reveal-stagger.is-visible ul.footer-links > li:nth-child(7) {
    animation-delay: 0.4s;
}

.reveal-stagger.is-visible ul.footer-links > li:nth-child(8) {
    animation-delay: 0.46s;
}

@keyframes motionStaggerIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* --- 5) Cards: refuerzo lift (sin cambiar reglas base fuertes) --- */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
}

/* --- 6) Iconos: menú móvil “Funciones” + FAQ --- */
.mobile-nav-toggle .bi-chevron-down {
    transition: transform 0.35s ease;
}

.mobile-nav-toggle.active .bi-chevron-down {
    transform: rotate(180deg);
}

.faq-icon {
    transition: transform 0.4s ease, color 0.35s ease, text-shadow 0.35s ease;
}

/* --- 7) Brillo ambiental muy suave sobre el overlay del hero --- */
.hero-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 75% 55% at 50% 18%, rgba(255, 215, 0, 0.09) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 70% 80%, rgba(0, 220, 255, 0.06) 0%, transparent 50%);
    opacity: 0.55;
    animation: motionHeroGlow 9s ease-in-out infinite alternate;
}

@keyframes motionHeroGlow {
    from {
        opacity: 0.35;
        transform: scale(1);
    }

    to {
        opacity: 0.75;
        transform: scale(1.03);
    }
}

/* --- 8) prefers-reduced-motion: desactiva animaciones “de capa” añadidas aquí --- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .reveal-stagger ul.footer-links > li {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .hero-overlay::after {
        animation: none !important;
        opacity: 0 !important;
    }

    .mobile-nav-toggle .bi-chevron-down {
        transition: none !important;
    }

    .mobile-nav-toggle.active .bi-chevron-down {
        transform: rotate(180deg);
    }
}