/* ============================================================
   Quantia — sistema de movimiento (motion.css)
   Lenguaje: una señal que "resuelve" en foco (partículas → nitidez)
   y la barrera de doble rendija que se materializa. Sobrio, físico,
   monocromo. Aditiva sobre styles.css. La cascada de las grillas de
   la landing la coordina motion.js; Research entra por CSS al cargar.
   Respeta prefers-reduced-motion.
   ============================================================ */

/* Keyframe base: entrada que se enfoca desde desenfoque + desplazamiento. */
@keyframes q-enter{
  from{ opacity:0; transform:translateY(20px); filter:blur(8px); }
  to  { opacity:1; transform:none;             filter:none; }
}
/* Keyframe de "barrera que se traza" (filetes horizontales de artículo). */
@keyframes q-draw{
  from{ transform:scaleX(0); opacity:0; }
  to  { transform:scaleX(1); opacity:.6; }
}

/* ============ LANDING ============ */

/* 0) Entrada del HERO al cargar (una sola vez), escalonada. */
.hero-in .eyebrow,
.hero-in .sub,
.hero-in .hero-cta{ animation: q-enter .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-in .eyebrow { animation-delay:.15s; }
.hero-in .sub     { animation-delay:.32s; }
.hero-in .hero-cta{ animation-delay:.49s; }

/* 1) Revelado "resuelve en foco" para cabeceras, leads y bloques
      (usa el sistema .reveal/.staged que ya gestiona el script base). */
.reveal{
  transition:
    opacity .85s cubic-bezier(.2,.7,.2,1),
    transform .85s cubic-bezier(.2,.7,.2,1),
    filter .85s cubic-bezier(.2,.7,.2,1);
}
.reveal.staged{ transform: translateY(30px); filter: blur(8px); }

/* 2) La barrera de doble rendija se materializa en cada cabecera de sección. */
.sec-head-row .sec-filete{
  transition: transform .8s cubic-bezier(.2,.7,.2,1) .08s, opacity .8s ease .08s;
  transform-origin:center;
}
.sec-head-row.staged .sec-filete{ transform: scaleY(.2); opacity:0; }

/* 3) Cascada de los hijos de cada grilla — coordinada por motion.js.
      Cada hijo recibe --si (índice); el contenedor recibe .q-go al entrar. */
.q-rise{
  opacity:0; transform: translateY(28px); filter: blur(8px);
  transition:
    opacity .7s cubic-bezier(.2,.7,.2,1),
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--si, 0) * 95ms);
  will-change: opacity, transform, filter;
}
.q-go .q-rise{ opacity:1; transform:none; filter:none; }

/* 4) Subrayado editorial en la nav (hover + sección activa). */
.nav-links a:not(.btn){ position:relative; }
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background: var(--ink); transform: scaleX(0); transform-origin:left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).current::after{ transform: scaleX(1); }

/* 5) Pista de scroll del hero: pulso lento y discreto. */
@keyframes q-scrollpulse{
  0%,100%{ opacity:.35; transform:translateY(0); }
  50%    { opacity:1;   transform:translateY(5px); }
}
.scroll-hint .bar{ animation: q-scrollpulse 2.6s ease-in-out infinite; }

/* ============ RESEARCH (índice + artículos) ============
   Páginas cortas y sin el sistema .reveal: se animan al cargar, en CSS,
   con el mismo lenguaje (enfoque que resuelve + filete que se traza). */

/* Índice de research */
.research-intro{ animation: q-enter .9s cubic-bezier(.2,.7,.2,1) both .08s; }
.research-list .post-row{ animation: q-enter .8s cubic-bezier(.2,.7,.2,1) both; }
.research-list .post-row:nth-child(1){ animation-delay:.22s; }
.research-list .post-row:nth-child(2){ animation-delay:.34s; }
.research-list .post-row:nth-child(3){ animation-delay:.46s; }
.research-list .post-row:nth-child(4){ animation-delay:.58s; }
.research-list .post-row:nth-child(5){ animation-delay:.70s; }

/* Artículo */
.post-article .post-back  { animation: q-enter .8s cubic-bezier(.2,.7,.2,1) both .04s; }
.post-article .post-header{ animation: q-enter .9s cubic-bezier(.2,.7,.2,1) both .12s; }
.post-article .prose      { animation: q-enter 1s  cubic-bezier(.2,.7,.2,1) both .34s; }
.post-article .post-end   { animation: q-enter .8s cubic-bezier(.2,.7,.2,1) both .10s; }
.post-article .post-filete{ transform-origin:left; animation: q-draw .9s cubic-bezier(.2,.7,.2,1) both .28s; }

/* ============ MOVIMIENTO REDUCIDO: todo estático ============ */
@media(prefers-reduced-motion: reduce){
  .hero-in .eyebrow,.hero-in .sub,.hero-in .hero-cta{ animation:none; }
  .reveal.staged{ transform:none; filter:none; }
  .sec-head-row.staged .sec-filete{ transform:none; opacity:.6; }
  .q-rise{ opacity:1; transform:none; filter:none; transition:none; }
  .scroll-hint .bar{ animation:none; }
  .nav-links a:not(.btn)::after{ transition:none; }
  .research-intro,.research-list .post-row,
  .post-article .post-back,.post-article .post-header,
  .post-article .prose,.post-article .post-end,
  .post-article .post-filete{ animation:none; }
}