/* HumanOff · capa de movimiento (parallax, cortinas entre secciones, tarjetas apiladas)
   Se suma a site.css sin reemplazarlo. Todo se desactiva con prefers-reduced-motion. */

/* Encabezado: el fondo cambia rápido para que el logo nunca quede sobre el color equivocado */
.nav{transition:border-color .2s linear}
.nav ul a{transition:color .2s linear}
.nav .pill{transition:none}

/* Barra de progreso de lectura */
.mprog{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;pointer-events:none}
.mprog i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#7ee8c7,#fff)}
.nav.light ~ .mprog i,body:has(.nav.light) .mprog i{background:linear-gradient(90deg,#000,#5b5b5f)}

/* Cortinas: cada sección sube sobre la anterior como una hoja */
.curtain{position:relative;z-index:1;margin-top:-44px;border-top:44px solid transparent;background-clip:border-box;border-radius:var(--cr,0px) var(--cr,0px) 0 0;transform:scale(var(--cs,1));transform-origin:50% 0;will-change:transform}
.curtain.curtain--lift{box-shadow:0 -40px 80px -40px rgba(0,0,0,.35)}

/* Parallax */
[data-par]{will-change:transform}
.post{isolation:isolate}
.post-media{overflow:hidden;aspect-ratio:1200/630;background:#000}
.post-media img{height:100%}
.post img{transform:translate3d(0,var(--py,0px),0) scale(1.07);transition:none}
.svc .glyph{transform:translate3d(0,var(--py,0px),0) rotate(var(--pr,0deg))}
.loc__film{perspective:1400px}
.loc__film .vstage{transform:rotateX(var(--rx,0deg)) scale(var(--sc,1));transform-origin:50% 100%;will-change:transform}
#wordText{transform:scale(var(--ws,1));transform-origin:50% 50%}

/* Servicios en móvil: mazo de tarjetas que se apilan */
@media (max-width:760px){
  .svc.stack{display:block}
  .svc.stack a{position:sticky;top:calc(var(--nav-h,64px) + env(safe-area-inset-top,0px) + 14px + var(--i,0) * 10px);margin-bottom:18px;min-height:280px;transform:scale(var(--ss,1));transform-origin:50% 0;filter:brightness(var(--sb,1));box-shadow:0 -10px 40px -20px rgba(0,0,0,.35);transition:none}
  .svc.stack a:last-child{margin-bottom:0}
  .svc.stack a:hover{transform:scale(var(--ss,1))}
}

/* Botones magnéticos fuera de la portada */
.pill.mag{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s,color .3s}

@media (prefers-reduced-motion:reduce){
  .curtain{transform:none!important;border-radius:0!important;box-shadow:none!important;margin-top:0;border-top:0}
  .post img,.svc .glyph,.loc__film .vstage,#wordText{transform:none!important}
  .svc.stack a{position:relative;top:auto;transform:none!important;filter:none!important}
  .mprog{display:none}
}