/*
 * VerdeDigital / Tessera — sistema de motion compartido
 * Scroll-reveal, header con sombra al hacer scroll, animación del menú
 * móvil y micro-interacciones de botones/tarjetas. Un solo archivo para
 * las páginas del sitio: index, seguridad-biometrica, agentes-on-demand
 * y tessera.
 */

/* ── Texto oscuro sobre botones de color ────────────────────────────
 * Tailwind no genera "text-bg-DEFAULT" a partir de la clave DEFAULT, así
 * que el texto de los botones verde/violeta quedaba claro e ilegible. */

.text-bg-DEFAULT {
    color: #020617;
}

/* ── Scroll reveal ───────────────────────────────────────────────── */

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger helpers for cards/grids revealed together */
.reveal-1 { transition-delay: 0.06s; }
.reveal-2 { transition-delay: 0.14s; }
.reveal-3 { transition-delay: 0.22s; }
.reveal-4 { transition-delay: 0.30s; }

/* ── Header: sombra sutil al hacer scroll ───────────────────────── */

header {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

header[data-scrolled="true"] {
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.55);
}

/* ── Menú móvil: aparece con fade + slide en vez de un corte seco ── */

#mobile-menu.flex {
    animation: vd-menu-in 0.25s ease-out both;
}

@keyframes vd-menu-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* ── Micro-interacciones de botones ─────────────────────────────── */

.btn-motion {
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.btn-motion:hover {
    transform: translateY(-2px);
}

.btn-motion:active {
    transform: translateY(0) scale(0.97);
}

/* ── Transición nativa entre páginas (VerdeDigital ↔ Tessera) ─────
 * View Transitions API (cross-document). Al navegar entre páginas del
 * mismo sitio (p. ej. el botón "Cambiar a Tessera" / "Cambiar a
 * VerdeDigital", o cualquier otro link interno), el navegador captura
 * la página actual y la nueva, y hace un cross-fade entre ambas en vez
 * de un corte seco — el efecto "modo oscuro → modo claro" pedido.
 * Solo funciona en navegadores compatibles (Chromium); en el resto la
 * navegación es la normal, sin efecto, sin errores. */

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Enlaces con flecha: la flecha se desplaza al pasar el mouse ─── */

.link-arrow i,
.link-arrow svg {
    transition: transform 0.25s ease;
    display: inline-block;
}

.link-arrow:hover i,
.link-arrow:hover svg {
    transform: translateX(4px);
}

/* ── Respeta la preferencia de movimiento reducido del sistema ───── */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto !important;
    }

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

    #mobile-menu.flex {
        animation: none !important;
    }

    .btn-motion,
    .btn-motion:hover,
    .btn-motion:active,
    .card-surface,
    .card-surface:hover,
    .link-arrow i,
    .link-arrow svg,
    .link-arrow:hover i,
    .link-arrow:hover svg {
        transition: none !important;
        transform: none !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}