/* =========================================================
   García Recta Design — animations.css
   Sistema de reveals, keyframes, velocidades de parallax.
   ========================================================= */

/* ---------- Reveal genérico (scroll) ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }

.reveal-mask { overflow: hidden; }
.reveal-mask span { display: block; transform: translateY(100%); transition: transform .9s var(--ease); }
.reveal-mask.in-view span { transform: translateY(0); }

.reveal-line { position: relative; overflow: hidden; }
.reveal-line::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: var(--line-strong); transform: scaleX(0); transform-origin: left;
    transition: transform .9s var(--ease);
}
.reveal-line.in-view::after { transform: scaleX(1); }

/* ---------- Keyframes ---------- */
@keyframes hintpulse {
    0%, 100% { opacity: .25; transform: scaleY(.5); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ---------- Velocidades de parallax (aplicadas por JS via CSS var --py) ----------
   El brief pide distintas velocidades para fondo/imagen/texto: se
   implementa con una custom property que actualiza animations.js,
   así el desplazamiento queda centralizado acá como sistema, no
   hardcodeado sección por sección. */
[data-parallax] {
    transform: translateY(calc(var(--py, 0px)));
    will-change: transform;
}

/* ---------- Tilt sutil al hover (galerías / complementos) ---------- */
.tilt { transition: transform .35s var(--ease-soft); transform-style: preserve-3d; }

/* ---------- Reducción de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-mask span, .reveal-line::after,
    .hero-title .line span, .hero-eyebrow, .hero-sub, .hero-cta-row {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
    .scroll-hint .line { animation: none; opacity: .6; }
    [data-parallax] { transform: none !important; }
    .tilt { transform: none !important; }
    .detalle .bg-cover { transition: none !important; }
}