/* ============================================================
   RELEVANTE.IA — MOTION PACK (P21 adaptado a build estática)
   Todos los estados iniciales ocultos viven bajo body.con-motion
   (la pone JS solo si hay motion): sin JS o con reduced-motion,
   la página se ve completa y quieta.
   ============================================================ */

/* ---------- 0 · Pantalla de carga: letras sueltas -> logo -> cortina ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--accent);   /* cortina lima #DDF50A */
  overflow: hidden;
}
.intro.se-va {
  transition: transform 680ms cubic-bezier(0.7, 0, 0.2, 1);
  transform: translateY(-100%);  /* la cortina sube y descubre el home */
}
.intro__letra {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--ink);
  will-change: transform, opacity;
  transition: transform 950ms cubic-bezier(0.25, 0.9, 0.3, 1), opacity 400ms ease, filter 950ms ease;
}

/* ---------- 1 · Entrada del hero tras la carga ---------- */
body.con-motion .nav,
body.con-motion .hero__titulo,
body.con-motion .hero__sub,
body.con-motion .hero__ctas,
body.con-motion .hero__tabla {
  opacity: 0;
  transform: translateY(14px);
}
body.con-motion.ha-entrado .nav,
body.con-motion.ha-entrado .hero__titulo,
body.con-motion.ha-entrado .hero__sub,
body.con-motion.ha-entrado .hero__ctas,
body.con-motion.ha-entrado .hero__tabla {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease, transform 700ms var(--ease-out);
}
body.con-motion.ha-entrado .hero__titulo { transition-delay: 0ms; }
body.con-motion.ha-entrado .nav { transition-delay: 260ms; transform: none; }
body.con-motion.ha-entrado .hero__sub { transition-delay: 400ms; }
body.con-motion.ha-entrado .hero__ctas { transition-delay: 540ms; }
body.con-motion.ha-entrado .hero__tabla { transition-delay: 700ms; }

/* ---------- 2 · Titulares con blur (ida y vuelta) ---------- */
body.con-motion [data-blur] {
  opacity: 0;
  filter: blur(16px);
  transform: translateY(12px);
  transition: opacity 850ms ease, filter 850ms ease, transform 850ms var(--ease-out);
}
body.con-motion [data-blur].esta-visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* ---------- 3 · Filas que se colocan en escalera ---------- */
body.con-motion [data-filas] .b-fila,
body.con-motion [data-filas] .b-grupo > .etiqueta,
body.con-motion [data-filas] .captador__fila,
body.con-motion [data-filas] .captador__motor {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 550ms ease, transform 550ms var(--ease-out);
}
body.con-motion [data-filas].esta-visible .b-fila,
body.con-motion [data-filas].esta-visible .b-grupo > .etiqueta,
body.con-motion [data-filas].esta-visible .captador__fila,
body.con-motion [data-filas].esta-visible .captador__motor {
  opacity: 1;
  transform: none;
}
/* escalonado hasta 14 elementos */
body.con-motion [data-filas].esta-visible > * > *:nth-child(1),  body.con-motion [data-filas].esta-visible > *:nth-child(1)  { transition-delay: 40ms; }
body.con-motion [data-filas].esta-visible > * > *:nth-child(2),  body.con-motion [data-filas].esta-visible > *:nth-child(2)  { transition-delay: 110ms; }
body.con-motion [data-filas].esta-visible > * > *:nth-child(3),  body.con-motion [data-filas].esta-visible > *:nth-child(3)  { transition-delay: 180ms; }
body.con-motion [data-filas].esta-visible > * > *:nth-child(4),  body.con-motion [data-filas].esta-visible > *:nth-child(4)  { transition-delay: 250ms; }
body.con-motion [data-filas].esta-visible > * > *:nth-child(5),  body.con-motion [data-filas].esta-visible > *:nth-child(5)  { transition-delay: 320ms; }
body.con-motion [data-filas].esta-visible > * > *:nth-child(6),  body.con-motion [data-filas].esta-visible > *:nth-child(6)  { transition-delay: 390ms; }
body.con-motion [data-filas].esta-visible > * > *:nth-child(7),  body.con-motion [data-filas].esta-visible > *:nth-child(7)  { transition-delay: 460ms; }
body.con-motion [data-filas].esta-visible > * > *:nth-child(8),  body.con-motion [data-filas].esta-visible > *:nth-child(8)  { transition-delay: 530ms; }
body.con-motion [data-filas].esta-visible > * > *:nth-child(9),  body.con-motion [data-filas].esta-visible > *:nth-child(9)  { transition-delay: 600ms; }
body.con-motion [data-filas].esta-visible > * > *:nth-child(10), body.con-motion [data-filas].esta-visible > *:nth-child(10) { transition-delay: 670ms; }
body.con-motion [data-filas].esta-visible > * > *:nth-child(11), body.con-motion [data-filas].esta-visible > *:nth-child(11) { transition-delay: 740ms; }
body.con-motion [data-filas].esta-visible > * > *:nth-child(12), body.con-motion [data-filas].esta-visible > *:nth-child(12) { transition-delay: 810ms; }
body.con-motion [data-filas].esta-visible > * > *:nth-child(13), body.con-motion [data-filas].esta-visible > *:nth-child(13) { transition-delay: 880ms; }
body.con-motion [data-filas].esta-visible > * > *:nth-child(14), body.con-motion [data-filas].esta-visible > *:nth-child(14) { transition-delay: 950ms; }

/* ---------- 4 · Declaración: líneas con blur escalonado ---------- */
body.con-motion .declaracion [data-linea] {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(10px);
  transition: opacity 750ms ease, filter 750ms ease, transform 750ms var(--ease-out);
}
body.con-motion .declaracion [data-linea].esta-visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* ---------- 5 · Código que se escribe (e3) ---------- */
body.con-motion .e3__linea { opacity: 0; }
body.con-motion .e3__linea.linea-escrita { opacity: 1; }
body.con-motion .e3__linea.linea-activa > span:last-child::after {
  content: "▌";
  color: var(--accent);
  animation: caret-parpadeo 700ms steps(1) infinite;
}
@keyframes caret-parpadeo { 50% { opacity: 0; } }

/* ---------- 6 · Sombras y brillos pedidos ---------- */
.gsc-slide img { box-shadow: 0 20px 52px rgba(10, 10, 10, 0.18); }  /* sombra bajo las capturas (pedida) */
.boton--primaria { transition: box-shadow 250ms ease, transform 150ms ease; }
.boton--primaria:hover {
  box-shadow: 0 0 0 3px rgba(221, 245, 10, 0.4), 0 0 30px rgba(221, 245, 10, 0.85);  /* brillo al hover (pedido) */
}

/* ---------- Reduced motion: todo quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro, .transicion { display: none !important; }
}