/* MOTION SPARK — SISTEMA DE REVEAL CANÓNICO PARA TODO EL */



:root{
  /* curvas — expo de Neko (arranca rápido, asienta largo) */
  --mo-expo: var(--e-expo, var(--ease-out, cubic-bezier(.16,1,.3,1)));
  --mo-ease: var(--ease,   var(--ease-out, cubic-bezier(.4,0,.2,1)));

  /* color — index: --tinta/--suave · v1: --texto/--texto-2 */
  --mo-tinta: var(--tinta, var(--texto,   #221713));
  --mo-suave: var(--suave, var(--texto-2, #6b5f5a));

  /* geometría y tiempo del sistema de reveal */
  --mo-dur:        .8s;    /* reveal genérico */
  --mo-shift:      14px;   /* desplazamiento de entrada (sutil, no 40px) */
  --mo-dur-clip:   1s;     /* cortina de imagen */
  --mo-dur-settle: 1.3s;   /* la escala asienta DESPUÉS de la cortina */
  --mo-clip:       14%;    /* recorte inicial superior de .rv-clip */
  --mo-scale:      1.06;   /* escala inicial de .rv-clip */
  --mo-dur-grupo:  .7s;    /* hijos de una cascada */
  --mo-shift-grupo:16px;
  --mo-stagger:    .06s;   /* delay entre hijos de la cascada (20-ago: tope .42 s al 8.º hijo) */
  --mo-plx:        26px;   /* recorrido del parallax (lo lee el JS) */
}


:root{ --e-expo: var(--mo-expo); }



.rv{
  opacity:1; transform:none;
  transition:opacity var(--mo-dur) var(--mo-expo),
             transform var(--mo-dur) var(--mo-expo);
}
.js .rv{ opacity:0; transform:translateY(var(--mo-shift)); }
.js .rv.in{ opacity:1; transform:none; }



.js .rv-clip>img{
  clip-path:inset(var(--mo-clip) 0 0 0 round var(--clip-r,0px));
  transform:scale(var(--mo-scale));
  transition:clip-path var(--mo-dur-clip) var(--mo-expo),
             transform var(--mo-dur-settle) var(--mo-expo);
}
.js .rv-clip.in>img{ clip-path:inset(0 0 0 0 round var(--clip-r,0px)); transform:scale(1); }
/* 20-ago · arranque suave: en móvil la cortina (clip-path + scale sobre fotos grandes) es la animación
   más cara del sitio y nadie la ve completa. Ahí la foto entra solo con opacidad + 10 px. */
@media(max-width:767px){
  .js .rv-clip>img{ clip-path:none; transform:translateY(10px); opacity:0;
    transition:opacity .7s var(--mo-expo), transform .7s var(--mo-expo); }
  .js .rv-clip.in>img{ transform:none; opacity:1; }
}



.js .rv-grupo>*,
.js .riel .tcard{           /* alias legacy: el riel del equipo en index */
  opacity:0; transform:translateY(var(--mo-shift-grupo));
  transition:opacity var(--mo-dur-grupo) var(--mo-expo),
             transform var(--mo-dur-grupo) var(--mo-expo);
}
.js .rv-grupo.in>*,
.js .riel.in .tcard{ opacity:1; transform:none; }

.rv-grupo>*:nth-child(2),  .riel .tcard:nth-child(2){ transition-delay:calc(var(--mo-stagger) * 1) }
.rv-grupo>*:nth-child(3),  .riel .tcard:nth-child(3){ transition-delay:calc(var(--mo-stagger) * 2) }
.rv-grupo>*:nth-child(4),  .riel .tcard:nth-child(4){ transition-delay:calc(var(--mo-stagger) * 3) }
.rv-grupo>*:nth-child(5),  .riel .tcard:nth-child(5){ transition-delay:calc(var(--mo-stagger) * 4) }
.rv-grupo>*:nth-child(6),  .riel .tcard:nth-child(6){ transition-delay:calc(var(--mo-stagger) * 5) }
.rv-grupo>*:nth-child(7),  .riel .tcard:nth-child(7){ transition-delay:calc(var(--mo-stagger) * 6) }
/* 20-ago · arranque suave (regla 5): el último hijo de una cascada parte a lo sumo .42 s después
   del primero; antes el 12.º esperaba .77 s y «llegaba» cuando ya nadie miraba. */
.rv-grupo>*:nth-child(n+8),
.riel .tcard:nth-child(n+8){ transition-delay:.42s }



.reveal-h h2,
[data-reveal-words]{
  display:flex; flex-wrap:wrap; gap:.25em .28em; max-width:20ch;
}
.reveal-h .w,
[data-reveal-words] .w{
  color:var(--mo-suave); opacity:1;
  transition:color .3s var(--mo-ease), opacity .3s var(--mo-ease);
}
.reveal-h .w.on,
[data-reveal-words] .w.on{ color:var(--mo-tinta); }



.hero-runway{
  position:relative;
  height:var(--mo-runway,165vh);
  height:var(--mo-runway,165lvh);
}
@media(max-width:767px){
  /* móvil: el efecto es más sutil — no cobra 2.75 pantallas de scroll */
  .hero-runway{ height:var(--mo-runway-mov,132vh); height:var(--mo-runway-mov,132lvh); }
}
.hero-sticky{ position:sticky; top:0; height:100vh; height:100lvh; overflow:hidden; }
#hero-marco{
  position:absolute; top:0; right:0; bottom:0; left:0;
  overflow:hidden; border-radius:0;
  will-change:top,right,bottom,left,border-radius;
}
/* sin JS el marco nunca se anima: el runway largo sería scroll vacío */
html:not(.js) .hero-runway{ height:auto; min-height:100lvh; }



.plx{ /* 20-ago: will-change lo pone y lo quita el JS según cercanía (regla 5); nada permanente */ }



@media(prefers-reduced-motion:reduce){
  *{ transition:none!important; animation:none!important; scroll-behavior:auto!important }

  /* 1 · reveal genérico */
  .rv,.js .rv,.js .rv.in{ opacity:1; transform:none }

  /* 2 · cortina de imagen */
  .js .rv-clip>img,.js .rv-clip.in>img{ clip-path:none; transform:none }

  /* 3 · cascada de grupo */
  .js .rv-grupo>*,.js .riel .tcard{ opacity:1; transform:none; transition-delay:0s!important }

  /* 4 · titular palabra a palabra: se entrega leído */
  .reveal-h .w,[data-reveal-words] .w{ color:var(--mo-tinta); opacity:1 }

  
  .hero-runway{ height:auto!important; min-height:100lvh }
  #hero-marco{ will-change:auto }

  /* 6 · parallax */
  .plx{ transform:none!important; will-change:auto }
}

/* ===== nivel Neko (compartido pelvix/mom) ===== */
/* titulares que emergen por líneas enmascaradas */
.lmask .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.lmask .w i{display:inline-block;font-style:inherit;transform:translateY(118%);transition:transform .5s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--wi)*18ms)}
.lmask.in .w i,.lmask.go .w i{transform:none}
@media(prefers-reduced-motion:reduce){.lmask .w i{transform:none !important;transition:none !important}}
/* aurora: lavados carmín/oro al 5% */
.aurora{position:relative;overflow:hidden}
.aurora::before{content:"";position:absolute;inset:-12% -18%;pointer-events:none;z-index:0;
  background:
    radial-gradient(46% 38% at 16% 18%, rgba(189,14,49,.05), transparent 66%),
    radial-gradient(40% 34% at 84% 72%, rgba(143,109,18,.05), transparent 66%),
    radial-gradient(30% 26% at 60% 6%, rgba(189,14,49,.028), transparent 60%);}
.aurora>*{position:relative;z-index:1}