/* Movimiento: progreso de lectura, textos, entradas, scroll y microinteracciones.
   Todo se desactiva con prefers-reduced-motion. */
:root{--sp:0}

/* Barra superior */
.top::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--ver);transform-origin:0 50%;transform:scaleX(var(--sp));pointer-events:none}
.top__in{transition:height .3s var(--ease)}
.top.is-small .top__in{height:56px}
.marks::before,.marks::after{rotate:calc(var(--sp) * 270deg)}

/* Pulsaciones y enlaces */
.btn:active,.filters button:active,.deck__nav button:active{scale:.96}
.btn,.filters button,.deck__nav button{transition:transform .25s var(--ease),background .2s,color .2s,box-shadow .2s,scale .12s}
.ar{display:inline-block;transition:translate .25s var(--ease)}
.link:hover .ar,.next:hover .ar,.btn:hover .ar{translate:6px 0}
.ar--out{transition:translate .25s var(--ease)}
a:hover>.ar--out{translate:3px -3px}
.row__n{transition:translate .3s var(--ease)}
.row:hover .row__n{translate:-8px 0}
.seal:active{scale:.9}

/* Pie */
.foot__big{width:fit-content;background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;transition:background-size .45s var(--ease),color .2s}
.foot__big:hover{background-size:100% 3px}

/* Arte de las cartas */
.card__art svg{transition:scale .5s var(--ease)}
.card:hover .card__art svg,.card:hover .card__art img{scale:1.06}
.card__art img{transition:scale .5s var(--ease)}
@keyframes spin{to{rotate:360deg}}

/* Entrada de textos, palabra a palabra */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.08em .03em .16em;margin:-.08em -.03em -.16em}
.w>span{display:inline-block;transform:translateY(118%) rotate(4deg);transform-origin:0 100%;transition:transform .8s var(--ease);transition-delay:calc(var(--i) * 40ms)}
.split.in .w>span{transform:none}
.js .split[data-in]{opacity:1;transform:none}

/* Entradas en cascada */
.js [data-in]{transition-delay:calc(var(--d,0) * 70ms)}
.js .sheet .card[data-in],.js .strip .card[data-in]{transform:translateY(42px) rotate(calc(var(--t,1) * 2.5deg)) scale(.96)}
.js .sheet .card[data-in].in,.js .strip .card[data-in].in{transform:none}
.js [data-in].wipe{opacity:1;transform:scale(1.04);clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease),transform 1.3s var(--ease)}
.js [data-in].wipe.in{transform:none;clip-path:inset(0)}
.js .cycle li[data-in]::before{scale:0;transition:scale .5s var(--ease) calc(var(--d,0) * 90ms + .2s)}
.js .cycle li[data-in].in::before{scale:1}

/* Reparto de la mano de cartas */
.js .hand:not(.dealt)>*{opacity:0;transform:translateY(30%) rotate(0deg)!important}
.hand.dealing>*{transition:transform .8s var(--ease),opacity .4s;}
.hand.dealing>:nth-child(2){transition-delay:.12s}
.hand.dealing>:nth-child(3){transition-delay:.24s}
@media (min-width:761px){
  .hand{translate:0 calc(var(--fan,0) * -28px)}
  .hand>:nth-child(1){rotate:calc(var(--fan,0) * -5deg)}
  .hand>:nth-child(3){rotate:calc(var(--fan,0) * 5deg)}
}

/* Banda cinética */
.band{overflow:hidden;padding-block:clamp(14px,2.4vw,28px);border-bottom:1px solid var(--line);white-space:nowrap}
.band p{display:inline-block;font:800 clamp(52px,10.5vw,152px)/1.02 var(--display);letter-spacing:-.04em;transform:translateX(var(--bx,0px));will-change:transform}
.band span{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.band b{color:var(--ver);font-weight:800}

/* Laboratorio fijado: el scroll vertical mueve las cartas en horizontal */
.pin--on{height:calc(100vh + var(--dist,0px));padding-block:0;overflow-x:clip}
.pin--on .pin__in{position:sticky;top:56px;height:calc(100vh - 56px);display:flex;flex-direction:column;justify-content:center}
.pin--on .head{margin-bottom:clamp(16px,2.4vw,28px)}
.pin--on .strip{width:max-content;margin:0;padding:8px 0 16px;overflow:visible;scroll-snap-type:none;grid-auto-columns:clamp(230px,20vw,290px);transform:translateX(calc(var(--px,0) * -1px));will-change:transform}
.pin__bar{display:none;height:3px;background:var(--line);margin-top:8px}
.pin__bar i{display:block;height:100%;background:var(--ver);transform-origin:0 50%;transform:scaleX(var(--pp,0))}
.pin--on .pin__bar{display:block}

/* Imágenes con recorrido al hacer scroll */
@supports (animation-timeline:view()){
  .human img,.me img{animation:drift linear both;animation-timeline:view()}
  @keyframes drift{from{object-position:50% 20%}to{object-position:50% 70%}}
}

/* Método */
.mtabs{position:relative}
.mtabs button{border-bottom-color:transparent!important;transition:color .2s}
.mtabs button:hover b{color:var(--ink)}
.mtabs__ind{position:absolute;bottom:-1px;left:0;height:4px;background:var(--ver);transition:left .45s var(--ease),width .45s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.js .mpanel:not([hidden])>div,.js .mpanel:not([hidden]) .tech li{animation:rise .55s var(--ease) both}
.js .mpanel:not([hidden]) .tech li:nth-child(1){animation-delay:.08s}
.js .mpanel:not([hidden]) .tech li:nth-child(2){animation-delay:.13s}
.js .mpanel:not([hidden]) .tech li:nth-child(3){animation-delay:.18s}
.js .mpanel:not([hidden]) .tech li:nth-child(4){animation-delay:.23s}
.js .mpanel:not([hidden]) .tech li:nth-child(5){animation-delay:.28s}
.js .mpanel:not([hidden]) .tech li:nth-child(6){animation-delay:.33s}

/* Filtros y paleta */
.sheet.flip .card:not([hidden]){animation:rise .5s var(--ease) both;animation-delay:calc(var(--k,0) * 35ms)}
@keyframes palIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.pal:not([hidden]) .pal__box{animation:palIn .26s var(--ease)}
.toc a{transition:color .2s,border-color .2s}

@media (max-width:760px){
  .top.is-small .top__in{height:60px}
  .band p{-webkit-text-stroke:0}
}
@media (prefers-reduced-motion:reduce){
  :root:not(.motion-on).js .hand:not(.dealt)>*{opacity:1}
  :root:not(.motion-on) .marks::before,:root:not(.motion-on) .marks::after,:root:not(.motion-on) .hand{rotate:none;translate:none}
  :root:not(.motion-on) .human img,:root:not(.motion-on) .me img{animation:none}
}
.motion-off .marks::before,.motion-off .marks::after,.motion-off .hand{rotate:none;translate:none}
html.smooth{scroll-behavior:auto}