/* ==========================================================================
   ANGCOR — movimiento
   Todo vive dentro de @media (prefers-reduced-motion:no-preference).
   Los revelados al scroll dependen ademas de la clase js-motion, que el
   script solo agrega cuando el sistema no pide movimiento reducido.
   ========================================================================== */

@media (prefers-reduced-motion:no-preference){

  @keyframes angcor-rise{
    from{opacity:0;transform:translate3d(0,28px,0)}
    to{opacity:1;transform:none}
  }
  @keyframes angcor-pop{
    from{opacity:0;transform:translate3d(0,20px,0) scale(.96)}
    to{opacity:1;transform:none}
  }
  @keyframes angcor-drop{
    from{opacity:0;transform:translate3d(0,-16px,0)}
    to{opacity:1;transform:none}
  }

  /* --- revelado de bloques al entrar en pantalla --------------------------- */
  .js-motion .reveal{
    opacity:0;
    transform:translate3d(0,28px,0);
    transition:opacity .75s var(--ease),transform .75s var(--ease);
    transition-delay:var(--delay,0ms);
  }
  .js-motion .reveal--pop{transform:translate3d(0,26px,0) scale(.96)}
  .js-motion .reveal.is-visible{opacity:1;transform:none}

  /* hijos escalonados dentro de un bloque revelado */
  .js-motion .reveal.is-visible > .stagger > *{
    animation:angcor-rise .7s var(--ease) both;
  }

  /* --- titulares revelados linea por linea -------------------------------- */
  .js-motion .is-lines .rl{
    display:inline-block;
    overflow:hidden;
    vertical-align:bottom;
    padding-bottom:.16em;
    margin-bottom:-.16em;
  }
  .js-motion .is-lines .rl > span{
    display:inline-block;
    transform:translate3d(0,110%,0);
    transition:transform .9s var(--ease);
    transition-delay:var(--delay,0ms);
  }
  .js-motion .is-lines.is-visible .rl > span{transform:none}

  /* --- hairlines que se trazan -------------------------------------------- */
  .js-motion .hairline line,
  .js-motion .hairline path{
    stroke-dasharray:100;
    stroke-dashoffset:100;
    transition:stroke-dashoffset .9s var(--ease);
    transition-delay:var(--delay,0ms);
  }
  .js-motion .hairline.is-drawn line,
  .js-motion .hairline.is-drawn path{stroke-dashoffset:0}

  /* la linea de metodologia la mueve el scroll, sin transicion */
  .js-motion .method__line line{
    stroke-dasharray:100;
    stroke-dashoffset:100;
  }

  /* --- entrada del hero, sin esperar al JS --------------------------------
     El titular se arma por caracteres cuando motion.js esta vivo. Todo lo
     demas entra con @keyframes, que no depende de nada y no retrasa el
     primer pintado.
     ---------------------------------------------------------------------- */
  .hero .index-label{animation:angcor-drop .6s var(--ease) both;animation-delay:.05s}
  .hero__lead{animation:angcor-rise .8s var(--ease) both;animation-delay:.5s}
  .hero__actions{animation:angcor-rise .8s var(--ease) both;animation-delay:.6s}
  .hero__media img{animation:angcor-zoom 2.4s var(--ease) both}
  .hero__crop span{animation:angcor-fade .9s var(--ease) both;animation-delay:.3s}
  .hero__ticker{animation:angcor-fade 1s var(--ease) both;animation-delay:.9s}
  .hero__pillars li{
    animation:angcor-rise .8s var(--ease) both;
    animation-delay:calc(.7s + var(--i,0) * .08s);
  }

  /* Sin JS el titular no se parte: entra entero y nadie nota la diferencia. */
  html:not(.js-motion) .hero__title{animation:angcor-rise .6s var(--ease) both}

  /* El paso de linea a linea del titular se escalona por bloque. */
  .js-motion .hero__line:nth-child(1) .ch{transition-delay:calc(.15s + var(--i,0) * 22ms)}
  .js-motion .hero__line:nth-child(2) .ch{transition-delay:calc(.28s + var(--i,0) * 22ms)}
  .js-motion .hero__line:nth-child(3) .ch{transition-delay:calc(.41s + var(--i,0) * 22ms)}
  .js-motion .hero__line:nth-child(4) .ch{transition-delay:calc(.54s + var(--i,0) * 22ms)}

  @keyframes angcor-zoom{
    from{transform:scale(1.08)}
    to{transform:none}
  }
  @keyframes angcor-fade{
    from{opacity:0}
    to{opacity:1}
  }

  /* --- caracteres ---------------------------------------------------------
     El titular se arma letra por letra desde abajo. El retraso lo marca el
     indice que escribe motion.js, no una lista fija en el CSS.
     ---------------------------------------------------------------------- */
  .js-motion .is-chars{
    --step:18ms;
    display:inline-block;
  }
  .js-motion .is-chars .ch{
    display:inline-block;
    will-change:transform,opacity;
    opacity:0;
    transform:translate3d(0,.7em,0) rotate(3deg);
    transition:opacity .5s var(--ease-out-expo),transform .8s var(--ease-out-expo);
    transition-delay:calc(var(--i,0) * var(--step));
  }
  .js-motion .is-chars.is-visible .ch{
    opacity:1;
    transform:none;
  }

  /* --- parallax -----------------------------------------------------------
     motion.js publica --py en px. El CSS decide si lo aplica y cuanto.
     ---------------------------------------------------------------------- */
  .js-motion [data-parallax]{
    transform:translate3d(0,var(--py,0px),0);
    will-change:transform;
  }

  /* --- cinta continua ------------------------------------------------------ */
  .js-motion .js-marquee.is-running{
    display:flex;
    width:max-content;
    animation:angcor-slide var(--marquee-speed,38s) linear infinite;
  }
  .js-motion .js-marquee.is-running:hover{animation-play-state:paused}
  @keyframes angcor-slide{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(-50%,0,0)}
  }

  /* --- iman ----------------------------------------------------------------
     El desplazamiento es corto a proposito: se siente, no se ve.
     ---------------------------------------------------------------------- */
  .js-motion .js-magnet{
    transition:transform .5s var(--ease);
  }
  .js-motion .js-magnet:hover{
    transform:translate3d(calc(var(--mx,0) * 10px),calc(var(--my,0) * 10px),0);
    transition-duration:.15s;
  }

  /* --- contorno que se rellena al entrar ----------------------------------- */
  .js-motion .is-visible .outline,
  .js-motion .outline.is-visible{
    transition:color .9s var(--ease) .35s,-webkit-text-stroke-color .9s var(--ease);
  }

  /* --- entrada de la barra de navegacion ---------------------------------- */
  .site-header{animation:angcor-drop .7s var(--ease) both;animation-delay:.1s}

  /* --- menu movil escalonado ---------------------------------------------- */
  .nav-panel a,
  .nav-panel .lang-switch{
    opacity:0;
    transform:translate3d(0,18px,0);
    transition:opacity .5s var(--ease),transform .5s var(--ease);
  }
  .nav-panel.is-open a,
  .nav-panel.is-open .lang-switch{
    opacity:1;
    transform:none;
    transition-delay:calc(140ms + var(--i,5) * 60ms);
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .method__rail{transform:none}
  /* Sin JS no hay clones: la cinta queda como una fila fija y recortada. */
  .js-marquee{display:flex}
}