/* ═══════════════════════════════════════════════════════════════════
   ANIMACIÓN · reimplementación del sistema de Skinome, sin librerías

   Skinome usa AOS. Acá el trabajo lo hace js/aos.js: un
   IntersectionObserver que agrega .aos-animate cuando el ancla entra
   en pantalla. Todo lo demás es CSS.

   El contrato es idéntico al de ellos, así que el marcado se lee igual:
     data-aos="fade|fade-up|fade-left|hero|image-in"
     data-aos-delay="0|150|300|…"     escalonado entre hermanos
     data-aos-anchor="#id"            dispara con el contenedor
     data-aos-order="1|2|3"           encadenado dentro del hero
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base ───────────────────────────────────────────────────────────
   Sin .aos-animate la duración es 0: si el elemento ya estaba visible
   al cargar, aparece sin transición en vez de animar hacia atrás. */
[data-aos]{transition-duration:var(--aos-dur);transition-timing-function:ease-out}
[data-aos]:not(.aos-animate){transition-duration:0s;transition-delay:0s}

[data-aos^="fade"]{opacity:.001;transition-property:opacity,transform}
[data-aos^="fade"].aos-animate{opacity:1;transform:translateZ(0)}
[data-aos="fade-up"]{transform:translateY(var(--desplazo))}
[data-aos="fade-left"]{transform:translateX(var(--desplazo))}

/* Escalonado. Skinome escribe el retardo en el atributo; se genera de
   150 en 150 hasta 1650, que es lo que aguanta una fila de ocho. */
[data-aos][data-aos-delay="0"]    {transition-delay:0ms}
[data-aos][data-aos-delay="150"]  {transition-delay:150ms}
[data-aos][data-aos-delay="300"]  {transition-delay:300ms}
[data-aos][data-aos-delay="450"]  {transition-delay:450ms}
[data-aos][data-aos-delay="600"]  {transition-delay:600ms}
[data-aos][data-aos-delay="750"]  {transition-delay:750ms}
[data-aos][data-aos-delay="900"]  {transition-delay:900ms}
[data-aos][data-aos-delay="1050"] {transition-delay:1050ms}
[data-aos][data-aos-delay="1200"] {transition-delay:1200ms}
[data-aos][data-aos-delay="1350"] {transition-delay:1350ms}
[data-aos][data-aos-delay="1500"] {transition-delay:1500ms}
[data-aos][data-aos-delay="1650"] {transition-delay:1650ms}

/* ── Hero ───────────────────────────────────────────────────────────
   No es transición sino keyframe, porque encadena tres elementos con
   data-aos-order y una transición no sabe esperar su turno. */
[data-aos="hero"]{
  opacity:.001;
  will-change:transform,opacity;backface-visibility:hidden;
  animation-duration:.7s;animation-timing-function:ease-in-out;
  animation-fill-mode:both;transition:none;
}
[data-aos="hero"].aos-animate{animation-name:heroFade}
/* El hero encadena seis pasos: kicker → h1 → lead → CTA → sellos → guía.
   Los primeros tres delays son viejos; el CTA y los sellos ya usaban
   data-aos-order="4"/"5" en el HTML sin tener regla acá, así que
   animaban todos juntos en vez de escalonarse. Se completa la serie
   de 150 en 150 y se suma el ="6" para la guía de scroll. */
[data-aos-order="1"]{animation-delay:.15s}
[data-aos-order="2"]{animation-delay:.30s}
[data-aos-order="3"]{animation-delay:.45s}
[data-aos-order="4"]{animation-delay:.60s}
[data-aos-order="5"]{animation-delay:.75s}
[data-aos-order="6"]{animation-delay:.90s}

@keyframes heroFade{
  from{opacity:.001;transform:translate3d(0,var(--desplazo),0)}
  to  {opacity:1;transform:translate3d(0,0,0)}
}

/* ── Entrada de imagen ──────────────────────────────────────────────
   La cortina de clip-path corre mientras la foto se desliza un 20 %.
   Las dos capas van juntas: el recorte lo hace el contenedor y el
   desplazamiento la imagen, si no el clip se mueve con ella y no se
   ve nada. */
[data-aos="image-in"]{transition:none;overflow:hidden}
[data-aos="image-in"] > *{
  animation-duration:.9s;animation-timing-function:var(--e-expo);
  animation-fill-mode:both;
}
[data-aos="image-in"].aos-animate{animation:clipDesdeIzq .9s var(--e-expo) both}
[data-aos="image-in"].aos-animate > *{animation-name:imagenEntra}

@keyframes clipDesdeIzq{
  from{clip-path:polygon(0 0,0 0,0 100%,0 100%)}
  to  {clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
}
@keyframes imagenEntra{
  from{transform:translateX(20%) scale(1.06)}
  to  {transform:translateX(0) scale(1)}
}

/* ── Revelado de título por máscara ─────────────────────────────────
   El texto no se desvanece: se descubre de izquierda a derecha, como
   si lo escribiera una mano. Es el efecto más caro de Skinome y el
   que más se nota, así que se reserva para los H2 de sección. */
.titulo-revela{
  -webkit-mask-image:linear-gradient(90deg,#000 0 100%);
          mask-image:linear-gradient(90deg,#000 0 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:0% 100%;   mask-size:0% 100%;
}
.titulo-revela.aos-animate{animation:tituloRevela .9s var(--e-expo) both}
@keyframes tituloRevela{ to{-webkit-mask-size:100% 100%;mask-size:100% 100%} }

/* ── Marquee ────────────────────────────────────────────────────────
   El track lleva el contenido dos veces: al llegar a -50 % la segunda
   copia está exactamente donde arrancó la primera, y el reinicio es
   invisible. Con -100 % sobre una sola copia se ve el salto. */
.marquee{overflow:hidden;width:100%}
.marquee__track{
  display:inline-flex;width:max-content;will-change:transform;
  animation:marquee var(--marquee-tiempo,38s) linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Hover de foto ──────────────────────────────────────────────────
   0,8 s es largo a propósito: el zoom tiene que leerse como que la
   foto respira, no como un rebote. */
.zoom img{transition:transform .8s var(--e-escala)}
.zoom:hover img,.zoom:focus-visible img{transform:scale(1.045)}

/* ── Subrayado que nace a la izquierda ──────────────────────────── */
.subraya{position:relative}
.subraya::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--oro);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--e-expo);
}
.subraya:hover::after,.subraya:focus-visible::after,
.subraya[aria-expanded="true"]::after{transform:scaleX(1)}

/* ── Tirón elástico del hero ────────────────────────────────────────
   Al cargar, la página entera se estira ~48px hacia arriba, se suelta
   y pasa de largo unos px antes de acomodarse — el gesto de overscroll
   de iOS, que se lee sin explicación porque todo el mundo ya lo conoce.
   Se lee como que la sección de abajo "salta" dentro del hero.

   El easing va por tramo (animation-timing-function dentro de cada
   keyframe, no una sola curva en el shorthand) porque con una curva
   única para toda la animación la vuelta sale mecánica, no elástica:
   la ida necesita una salida suave y la vuelta un rebote (back-out),
   y ninguna curva sirve para las dos mitades a la vez.

   Es un transform, no un window.scrollTo, porque js/aos.js escucha
   scroll para su barrido de rezagados y js/header.js lee
   window.scrollY en cada frame para el telón y la cinta — mover el
   scroll real les dispararía a los dos en falso. Además el transform
   es compositor puro: cero reflow.

   will-change vive en la clase .tiron, no fijo sobre main, porque
   js/asomo.js pone y saca la clase al vuelo: dejarlo fijo sobre
   <main> sería una capa de compositor del tamaño de la página
   entera, permanente en vez de puntual.

   Dispara la animación js/asomo.js. */
main.tiron{--tiron:clamp(36px,5vh,48px);
  animation:tironAbajo .95s both;will-change:transform}

@keyframes tironAbajo{
  0%  {transform:translate3d(0,0,0);
       animation-timing-function:cubic-bezier(.25,1,.5,1)}
  34% {transform:translate3d(0,calc(-1 * var(--tiron)),0);
       animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
  72% {transform:translate3d(0,calc(.18 * var(--tiron)),0);
       animation-timing-function:ease-out}
  100%{transform:translate3d(0,0,0)}
}

/* ── Chevrones de la guía de scroll ──────────────────────────────────
   El rótulo y la geometría de los chevrones viven en
   css/componentes.css (.asomo-guia__chev); acá sólo el keyframe que
   cada <i> invoca. Caen en cascada (el segundo con animation-delay)
   y se apagan antes de llegar abajo, no de golpe. */
@keyframes guiaChev{
  0%  {transform:translateY(-6px) rotate(45deg);opacity:0}
  35% {opacity:1}
  70% {opacity:1}
  100%{transform:translateY(6px) rotate(45deg);opacity:0}
}

/* ── Transiciones entre páginas ─────────────────────────────────────
   Realce progresivo puro: el navegador que no soporta la View
   Transition API ignora todo este bloque y navega como siempre. No
   hay JS de por medio ni pantalla intermedia — el fundido lo hace el
   navegador entre el documento viejo y el nuevo.

   Corto a propósito (.22s): una transición de página que se nota es
   una transición de página que estorba. */
@view-transition{ navigation:auto }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.22s;
  animation-timing-function:var(--e-drawer);
}

/* ── Respeto por quien pidió que no se mueva nada ───────────────────
   No se desactiva sólo la animación: hay que devolver opacidad y
   recorte, si no el contenido queda invisible para siempre. */
@media(prefers-reduced-motion:reduce){
  [data-aos],[data-aos] > *,.titulo-revela,.marquee__track,.zoom img{
    animation:none !important;transition:none !important;
    opacity:1 !important;transform:none !important;
    clip-path:none !important;
    -webkit-mask-image:none !important;mask-image:none !important;
  }

  /* main.tiron sí necesita transform:none explícito (si no, el estado
     final del keyframe en 0% podría no aplicarse sin animación). Los
     chevrones (.asomo-guia__chev i) son al revés: arrancan en
     opacity:0 dentro de su propio keyframe, así que sólo se les apaga
     la animación y se los deja en su opacity:0 de base — queda el
     rótulo "Seguí bajando" quieto y visible (la regla de arriba ya le
     fuerza opacity:1 por ser hijo directo de [data-aos]), sin
     chevrones cayendo, que es el resultado correcto acá. Por eso los
     chevrones no comparten esa regla y van aparte.

     Cinturón y tirantes: js/asomo.js además revisa
     prefers-reduced-motion y ni siquiera arranca si está activo, así
     que en la práctica esta regla es un respaldo. */
  main.tiron{animation:none !important;transform:none !important}
  .asomo-guia__chev i{animation:none !important}

  /* El chasis también. Este bloque sólo cubría el contenido animado, y
     quedaban afuera los tres movimientos más grandes del sitio: el
     cajón barriendo 420px, el buscador bajando de -100% y el header
     escondiéndose al scrollear. Se les saca la transición, no el
     estado final: siguen abriendo y cerrando, pero sin recorrido. */
  .cajon,.buscador,.top,.mega,.hdr__bg,.velo{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }

  /* La navegación deja de animarse, pero la página sigue cambiando. */
  @view-transition{ navigation:none }
}