/* =============================================================
   ASAVE · Capa de movimiento
   Estados iniciales + transiciones. El motor vive en js/motion.js.
   Todo se neutraliza con prefers-reduced-motion.
   ============================================================= */

/* ---------- 1. Telón de entrada ------------------------------------------ */
.curtain{
  position:fixed;inset:0;z-index:9999;background:var(--ink-950);
  display:grid;place-items:center;gap:1.6rem;
  transition:opacity .9s var(--ease-out),visibility .9s;
}
.curtain__mark{
  font-family:var(--font-display);font-size:clamp(2.2rem,8vw,3.6rem);font-weight:300;
  letter-spacing:.3em;text-transform:uppercase;color:var(--bone-50);
  opacity:0;transform:translateY(14px);
  animation:curtainIn .9s var(--ease-out) .15s forwards;
}
.curtain__rule{
  width:min(44vw,320px);height:1px;background:var(--gold-400);
  transform:scaleX(0);transform-origin:left;
  animation:curtainRule 1.15s var(--ease-in-out) .55s forwards;
}
.curtain.is-gone{opacity:0;visibility:hidden;pointer-events:none}
@keyframes curtainIn{to{opacity:1;transform:none}}
@keyframes curtainRule{to{transform:scaleX(1)}}

/* ---------- 2. Revelado al hacer scroll ---------------------------------- */
[data-reveal]{
  opacity:0;
  transition:
    opacity .95s var(--ease-out) var(--rd,0s),
    transform 1.05s var(--ease-out) var(--rd,0s),
    clip-path 1.2s var(--ease-out) var(--rd,0s);
}
[data-reveal="up"]    {transform:translateY(38px)}
[data-reveal="down"]  {transform:translateY(-28px)}
[data-reveal="left"]  {transform:translateX(44px)}
[data-reveal="right"] {transform:translateX(-44px)}
[data-reveal="scale"] {transform:scale(.94)}
[data-reveal="fade"]  {transform:none}
[data-reveal].is-in{opacity:1;transform:none}

/* Imagen que se descubre mientras su contenido hace un leve zoom-out.
   IMPORTANTE: el recorte va sobre la imagen, nunca sobre el contenedor.
   Un clip-path que deja el elemento a cero altura también anula su caja
   para IntersectionObserver, y el revelado no llegaría a dispararse nunca. */
.revimg{overflow:hidden}
.revimg img{
  clip-path:inset(0 0 100% 0);transform:scale(1.16);
  transition:clip-path 1.3s var(--ease-out) var(--rd,0s),transform 1.9s var(--ease-out) var(--rd,0s);
}
.revimg.is-in img{clip-path:inset(0 0 0 0);transform:scale(1)}

/* ---------- 3. Titulares partidos ---------------------------------------- */
.split__ln{display:block;overflow:hidden}
.split__ln>i{
  display:block;font-style:inherit;
  transform:translateY(105%);
  transition:transform 1.05s var(--ease-out) var(--sd,0s);
}
.split.is-in .split__ln>i{transform:none}
.split__w{display:inline-block;overflow:hidden;vertical-align:bottom}
.split__w>i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform .95s var(--ease-out) var(--sd,0s)}
.split.is-in .split__w>i{transform:none}

/* ---------- 4. Paralaje --------------------------------------------------- */
[data-parallax]{will-change:transform}

/* ---------- 5. Aparición escalonada de rejillas --------------------------- */
[data-stagger]>*{opacity:0;transform:translateY(30px);
  transition:opacity .85s var(--ease-out) var(--sd,0s),transform .85s var(--ease-out) var(--sd,0s)}
[data-stagger].is-in>*{opacity:1;transform:none}

/* ---------- 6. Filete que se dibuja --------------------------------------- */
/* Se anima un pseudoelemento: escalar el propio filete a cero lo dejaría sin
   caja y el observador nunca lo vería entrar en pantalla. */
.drawline{position:relative;overflow:hidden}
.drawline::after{
  content:'';position:absolute;inset:0;background:inherit;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.25s var(--ease-in-out) var(--rd,0s);
}
.drawline.is-in::after{transform:scaleX(1)}

/* ---------- 7. Transición entre páginas ----------------------------------- */
.pagefade{position:fixed;inset:0;z-index:9990;background:var(--ink-950);opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease-in-out),visibility .45s}
.pagefade.is-on{opacity:1;visibility:visible}

/* ---------- 8. Respeto por quien prefiere menos movimiento ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal],[data-stagger]>*,.revimg,.revimg img,.split__ln>i,.split__w>i,.drawline::after{
    opacity:1 !important;transform:none !important;clip-path:none !important;
  }
  .curtain{display:none}
  .marquee__track{animation:none}
  .scrollcue span{animation:none;transform:scaleY(1)}
}