/* Movimiento: transiciones entre páginas, cursor, estados de animación. Todo se apaga con reduced-motion. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-sale .45s cubic-bezier(.7,0,.3,1) both; }
::view-transition-new(root) { animation: vt-entra .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-sale { to { opacity: 0; transform: translateY(-40px) scale(.98); filter: blur(4px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(60px); clip-path: inset(100% 0 0 0 round 40px); } to { clip-path: inset(0 0 0 0 round 0); } }
.top { view-transition-name: barra; }

.mov .marq div, .mov .tira-in { animation: none !important; }

/* Mientras el movimiento se prepara, lo que va a animarse no se muestra (evita el parpadeo).
   Si el script no llega a correr, todo aparece igual a los 3 segundos. */
.js [data-split], .js [data-reveal], .js [data-stagger] > *, .js .hero-foto, .js .wall { visibility: hidden; animation: mostrar 0s 3s forwards; }
.js.mov-listo [data-split], .js.mov-listo [data-reveal], .js.mov-listo [data-stagger] > *, .js.mov-listo .hero-foto, .js.mov-listo .wall { visibility: visible; animation: none; }
@keyframes mostrar { to { visibility: visible; } }
.mov [data-split] .l, .mov [data-split] .w { will-change: transform; }

/* Stickers del hero: el mouse los mueve con translate, sin pisar el giro del arrastre */
.stk { translate: calc(var(--px, 0) * 1px) calc(var(--py, 0) * 1px); }

/* Cursor */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; width: 0; height: 0; opacity: 0; transition: opacity .2s; }
.cursor.vivo { opacity: 1; }
.cursor::before { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--lim); mix-blend-mode: difference; transition: transform .25s cubic-bezier(.2,.9,.3,1.3); }
.cursor.link::before { transform: scale(2.6); }
.cursor span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(0) rotate(-12deg); white-space: nowrap; background: var(--lim); color: var(--k); font: 800 16px var(--display); padding: 14px 20px; border-radius: 99px; box-shadow: 0 0 0 4px var(--w); transition: transform .3s cubic-bezier(.2,.9,.3,1.4); }
.cursor.grande span { transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
.cursor.grande::before { transform: scale(0); }
@media (pointer: coarse) { .cursor { display: none; } }

/* La barra pegada */
.top { transition: background .3s, backdrop-filter .3s; }
.top.pegada { background: rgba(11,11,12,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 0 0 22px 22px; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .stk { translate: none; }
}