/* Animation Tokens & Keyframes */
:root {
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --anim-duration-slow: 0.6s;
    --anim-duration-base: 0.3s;
    --anim-duration-fast: 0.15s;
}

/* 1. Reveal Animations */
@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 2. Entrada al hacer scroll. Solo se ocultan si hay JS (.js-nav la pone un
   script en línea del <head>, antes de pintar): sin JS, o si marcaprivada.js
   falla, el contenido se ve tal cual en vez de quedarse en blanco. Lo que va
   por encima del pliegue (hero, actualidad) no lleva estas clases: ocultarlo
   retrasaría el LCP aunque la imagen ya estuviera descargada. */
.js-nav .anim-reveal-up:not(.is-visible),
.js-nav .anim-fade-in:not(.is-visible) {
    opacity: 0;
}

.anim-reveal-up.is-visible {
    animation: revealUp var(--anim-duration-slow) var(--ease-out-expo) both;
}

.anim-fade-in.is-visible {
    animation: fadeIn var(--anim-duration-base) ease-in both;
}

@media (prefers-reduced-motion: reduce) {
    .js-nav .anim-reveal-up:not(.is-visible),
    .js-nav .anim-fade-in:not(.is-visible) {
        opacity: 1;
        animation: none !important;
    }

    /* Regla general (WCAG 2.3.3): sin zooms ni desplazamientos en hover, sin
       scroll suave. Se reduce a casi cero en vez de anular para que los
       eventos transitionend/animationend sigan disparándose en el JS. */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Con la transición a cero, estos hovers saltarían de golpe: se anulan.
       Van con !important porque card.css y home.css se cargan después.
       Lista explícita: un `:hover *` genérico rompería la X del menú. */
    .btn:hover,
    .social-share__item:hover,
    .card:hover,
    .card:hover .card__image img,
    .mp-report:hover,
    .mp-actualidad--nota:has(.mp-actualidad__title a:hover) .mp-actualidad__media img,
    .mp-actualidad--nota .mp-actualidad__media:hover img,
    .mp-hero--fullhead .mp-hero__media:hover img,
    .mp-hero__child:hover .mp-hero__child-media img,
    .mp-hero--fullhead:has(.mp-hero__title a:hover) .mp-hero__media img,
    .mp-tribuna:hover {
        transform: none !important;
    }
}