/**
 * BASE / MOTION
 * -----------------------------------------------------------------------------
 * Keyframes del tema y utilidades de revelado al hacer scroll.
 *
 *   <div class="reveal" data-reveal-delay="2"> … </div>
 *
 * assets/js/reveal.js añade .is-inview cuando el bloque entra en pantalla.
 *
 * IMPORTANTE: la opacidad 0 la pone el JS, nunca este archivo. Si el script no
 * llega a cargarse —o el navegador no tiene IntersectionObserver— el contenido
 * se ve igual; lo único que se pierde es la animación. Un `opacity: 0` escrito
 * aquí dejaría la página en blanco en ese caso.
 *
 * Va después de reset.css y antes de typography.css: cualquier capa posterior
 * puede usar estos keyframes.
 */

@keyframes fm-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* Halo azul: deriva amplia y lenta */
@keyframes fm-drift {
    0%,
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
    50%  { transform: translate3d(-4%, 3%, 0) scale(1.12); opacity: 1; }
}

/* Halo naranja: contrapunto, desfasado a propósito respecto a fm-drift */
@keyframes fm-drift-slow {
    0%,
    100% { transform: translate3d(0, 0, 0) scale(1.05); opacity: 0.6; }
    50%  { transform: translate3d(5%, -4%, 0) scale(1); opacity: 0.95; }
}

/* =============================================================
   REVELADO AL SCROLL
============================================================= */

.reveal.is-inview {
    animation: fm-rise var(--dur-reveal) var(--ease-out-soft) both;
}

/*
 * Escalonado. Los elementos de una misma fila entran con 90 ms de diferencia:
 * suficiente para que se lea como una secuencia y no como un parpadeo, sin que
 * el último tarde tanto que parezca que falta por cargar.
 */
.reveal.is-inview[data-reveal-delay="1"] { animation-delay: 0.09s; }
.reveal.is-inview[data-reveal-delay="2"] { animation-delay: 0.18s; }
.reveal.is-inview[data-reveal-delay="3"] { animation-delay: 0.27s; }
.reveal.is-inview[data-reveal-delay="4"] { animation-delay: 0.36s; }
.reveal.is-inview[data-reveal-delay="5"] { animation-delay: 0.45s; }

/* =============================================================
   CAPAS DECORATIVAS REUTILIZABLES

   El contenedor necesita position: relative y overflow: hidden.
============================================================= */

/* Rejilla técnica de fondo */
.fx-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--grid-light) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    /* La máscara evita que la rejilla se lea como una tabla: se desvanece. */
    mask-image: radial-gradient(80% 70% at 20% 40%, #000, transparent 76%);
    -webkit-mask-image: radial-gradient(80% 70% at 20% 40%, #000, transparent 76%);
}

.fx-grid--dark {
    background-image:
        linear-gradient(var(--grid-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
    background-size: var(--grid-size-dark) var(--grid-size-dark);
    mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
    -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
}

/* Halo animado. Cada sección lo coloca con sus propias reglas de posición. */
.fx-glow {
    position: absolute;
    pointer-events: none;
    animation: fm-drift 26s ease-in-out infinite;
}

.fx-glow--blue {
    background: var(--glow-blue-strong);
}

.fx-glow--orange {
    background: var(--glow-orange);
    animation: fm-drift-slow 32s ease-in-out infinite;
}

/* =============================================================
   ACCESIBILIDAD

   Con movimiento reducido la página queda completamente estática: los halos
   dejan de derivar y el revelado se resuelve en un fotograma.
============================================================= */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}