/* =========================================================
   Grupo WÖL — Motion v2026.1
   Requiere tokens/tokens.css + motion.js (agrega .wol-motion al <html>).
   Sin JS o con reduced-motion: todo se ve estático y completo.
   ========================================================= */
:root{
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-quart:cubic-bezier(.76,0,.24,1);
  --dur-reveal:900ms;
  --dur-split:1100ms;
  --stagger:70ms;
  --stagger-word:38ms;
}

/* ---------- REVEAL (aparecer al entrar en pantalla) ---------- */
.wol-motion [data-wol-reveal]{
  opacity:0;transform:translate3d(0,32px,0);
  transition:opacity var(--dur-reveal) var(--ease-expo),transform var(--dur-reveal) var(--ease-expo),clip-path 1.2s var(--ease-quart);
  transition-delay:calc(var(--i,0) * var(--stagger));
  will-change:opacity,transform;
}
.wol-motion [data-wol-reveal="fade"]{transform:none}
.wol-motion [data-wol-reveal="scale"]{transform:scale(.94)}
.wol-motion [data-wol-reveal="left"]{transform:translate3d(-40px,0,0)}
.wol-motion [data-wol-reveal="mask"]{opacity:1;transform:none;clip-path:inset(100% 0 0 0)}
.wol-motion [data-wol-reveal="mask"] img{transform:translate3d(0,var(--py,0px),0) scale(1.3)!important;transition:transform 1.6s var(--ease-expo)!important}
.wol-motion [data-wol-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.wol-motion [data-wol-reveal="mask"].is-in img{transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1.1))!important}

/* ---------- SPLIT TEXT (palabras que suben desde una máscara) ---------- */
.wol-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .16em 0;margin:0 -.08em -.16em 0}
.wol-wi{display:inline-block}
.wol-motion [data-wol-split] .wol-wi{transform:translate3d(0,110%,0) rotate(4deg);transform-origin:0 100%;transition:transform var(--dur-split) var(--ease-expo);transition-delay:calc(var(--i,0) * var(--stagger-word))}
.wol-motion [data-wol-split].is-in .wol-wi{transform:none}
/* el subrayado de énfasis va palabra por palabra */
em .wol-wi{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.12em}

/* ---------- PARALLAX ---------- */
.wol-motion [data-wol-parallax]:not(.wol-photo){transform:translate3d(0,var(--py,0px),0);will-change:transform}

/* ---------- FOTOS: B/N → color ---------- */
.wol-photo{overflow:hidden;position:relative}
.wol-photo img{
  filter:grayscale(1) contrast(1.08) brightness(.96)!important;
  transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1.1));
  transition:filter .7s var(--ease-expo),transform 1s var(--ease-expo);
  will-change:transform,filter;
}
.wol-photo::after{ /* barrido de luz al pasar el mouse */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform 1.1s var(--ease-expo);
}
.wol-photo:hover img,.wol-photo.is-color img,
a:hover .wol-photo img,a:focus-visible .wol-photo img,.wol-photo-host:hover .wol-photo img{
  filter:grayscale(0) contrast(1) brightness(1)!important;--ps:1.16;
}
.wol-photo:hover::after,a:hover .wol-photo::after,.wol-photo-host:hover .wol-photo::after{transform:translateX(120%)}

/* ---------- MAGNÉTICO ---------- */
[data-wol-magnetic]{transition:transform .5s var(--ease-expo)}
[data-wol-magnetic].is-mag{transition:transform .15s linear}

/* ---------- COUNT-UP ---------- */
[data-wol-count]{font-variant-numeric:tabular-nums}

/* ---------- MARQUEE ---------- */
.wol-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.wol-marquee-track{display:flex;gap:56px;width:max-content;animation:wol-marquee var(--marquee-dur,40s) linear infinite}
.wol-marquee:hover .wol-marquee-track{animation-play-state:paused}
@keyframes wol-marquee{to{transform:translate3d(-50%,0,0)}}

/* ---------- PROGRESO DE SCROLL ---------- */
.wol-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--text);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:100;pointer-events:none}

/* ---------- CURSOR (solo mouse) ---------- */
.wol-cursor{position:fixed;top:0;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:200;
  transition:width .35s var(--ease-expo),height .35s var(--ease-expo),margin .35s var(--ease-expo),opacity .3s;display:grid;place-items:center;opacity:0}
.wol-cursor.is-on{opacity:1}
.wol-cursor span{font:700 11px var(--label),system-ui;font-stretch:var(--label-stretch);letter-spacing:.12em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .2s;white-space:nowrap}
.wol-cursor.is-label{width:92px;height:92px;margin:-46px 0 0 -46px;mix-blend-mode:normal}
.wol-cursor.is-label span{opacity:1}
@media (hover:none),(pointer:coarse){.wol-cursor{display:none}}

/* ---------- REDUCED MOTION: todo quieto y visible ---------- */
@media (prefers-reduced-motion:reduce){
  .wol-motion [data-wol-reveal],.wol-motion [data-wol-split] .wol-wi{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .wol-motion [data-wol-parallax]{transform:none!important}
  .wol-photo img{transform:none!important;transition:filter .3s!important}
  .wol-marquee-track{animation:none}
  .wol-cursor{display:none}
}