/* ============================================
   ANIMATIONS.CSS — Scroll reveals & motion
   Complementa .reveal / .reveal.visible (definidos en variables.css).
   La clase .visible la añade reveal.js vía IntersectionObserver.
   ============================================ */

/* ---------- Estado inicial del hero (lo anima GSAP en hero-scroll.js) ---------- */
.landing-hero-copy {
  opacity: 0;
  transform: translateY(16px);
}

/* Si no hay GSAP / se prefiere movimiento reducido, el copy debe verse igual */
@media (prefers-reduced-motion: reduce) {
  .landing-hero-copy {
    opacity: 1;
    transform: none;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Reveal escalonado por data-delay ---------- */
.reveal[data-delay="100"] { transition-delay: 0.10s; }
.reveal[data-delay="200"] { transition-delay: 0.20s; }
.reveal[data-delay="300"] { transition-delay: 0.30s; }
.reveal[data-delay="400"] { transition-delay: 0.40s; }

/* ---------- Keyframes de respaldo reutilizables ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fallback: si por cualquier razón reveal.js no corre, al cargar la página
   se garantiza que el contenido marcado como .reveal termine visible.
   (La clase .js-ready la pone reveal.js; sin JS, este fallback actúa.) */
.no-js .reveal {
  opacity: 1;
  transform: none;
}


/* ============================================================
   EFECTOS DE TEXTO CON SCROLL (controlados por scroll-animations.js)
   ============================================================ */

/* ---- 1. Highlight: franja blanca que crece detrás del texto ---- */
.highlight {
  display: inline;
  padding: 0 0.1em;
  color: #fff;
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: 0 54%;
  background-size: 0% 88%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---- 2. Blur-reveal: entra desde abajo con desenfoque ---- */
.blur-reveal {
  opacity: 0;
  filter: blur(16px);
  transform: translateY(64px);
  will-change: transform, opacity, filter;
}

/* ---- 3. Reveal-text: palabra por palabra ---- */
.reveal-text .word {
  display: inline-block;
  margin-right: 0.18em;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(30px);
  will-change: transform, opacity, filter;
}

/* ---- 4. Typewriter: cursor parpadeante ---- */
.cursor {
  display: inline-block;
  width: 0.08em;
  height: 0.92em;
  margin-left: 0.06em;
  vertical-align: -0.08em;
  background: currentColor;
  animation: blink 0.7s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---- Fallback: movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
  .blur-reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .reveal-text .word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .highlight {
    background-size: 100% 88% !important;
    color: #000 !important;
  }
  .cursor {
    animation: none;
  }
}