/* ═══════════════════════════════════════════════════════════════════
   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}
[data-aos-order="1"]{animation-delay:.15s}
[data-aos-order="2"]{animation-delay:.30s}
[data-aos-order="3"]{animation-delay:.45s}

@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)}

/* ── 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;
  }
}