/* ---------- Movimiento con scroll (ver js/motion.js) ---------- */
:root { --ease-settle: cubic-bezier(0.34, 1.4, 0.64, 1); --duration-reveal: 900ms; }

/* Bloques que aparecen al entrar */
.has-motion .reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity var(--duration-reveal) var(--ease-out-expo), transform var(--duration-reveal) var(--ease-out-expo); }
.has-motion .reveal.is-in { opacity: 1; transform: none; }

/* Títulos: suben desde una máscara */
.has-motion .block-title.reveal, .has-motion .expo-works h2.reveal { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); translate: 0 0.6em; transition: clip-path 1100ms var(--ease-out-expo), translate 1100ms var(--ease-out-expo); }
.has-motion .block-title.reveal.is-in, .has-motion .expo-works h2.reveal.is-in { clip-path: inset(0 0 -0.2em 0); translate: 0 0; }

/* Grillas: cada pieza entra un poco después que la anterior */
.has-motion .cat-tile.reveal, .has-motion .works-grid li.reveal, .has-motion .class-item.reveal { transition-delay: calc(var(--n, 0) * 90ms); }
.cat-grid li:nth-child(2) .cat-tile, .works-grid li:nth-child(2), .classes .class-item:nth-child(2) { --n: 1; }
.cat-grid li:nth-child(3) .cat-tile, .works-grid li:nth-child(3) { --n: 2; }
.cat-grid li:nth-child(4) .cat-tile { --n: 3; }

/* Gesto propio: las obras se cuelgan en la pared y se asientan */
.has-motion .hang .wall-art .framed, .has-motion .hang .postcard-img {
  opacity: 0; transform: translateY(-2.2rem) rotate(-2.4deg); transform-origin: 50% 0;
  transition: opacity 600ms var(--ease-out-expo) var(--delay, 0ms), transform 1300ms var(--ease-settle) var(--delay, 0ms);
}
.has-motion .hang.is-in .wall-art .framed, .has-motion .hang.is-in .postcard-img { opacity: 1; transform: none; }
.has-motion .hang .art-meta { opacity: 0; transition: opacity 800ms var(--ease-out-expo) calc(var(--delay, 0ms) + 350ms); }
.has-motion .hang.is-in .art-meta { opacity: 1; }
/* el hover del carrusel sigue levantando la obra un poco */
.has-motion .hang.is-in .card:hover .wall-art .framed { transform: translateY(-4px); transition-delay: 0ms; }

/* Fotos grandes con parallax dentro de su marco */
.parallax-frame { overflow: hidden; }
.parallax-frame > img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .has-motion .reveal, .has-motion .hang * { opacity: 1 !important; transform: none !important; clip-path: none !important; translate: none !important; }
}

/* Feed de la serie: entra en diagonal, columna por columna */
.has-motion .feed-grid li.reveal { transition-delay: calc(var(--n, 0) * 70ms); }
.feed-grid li:nth-child(3n + 2) { --n: 1; }
.feed-grid li:nth-child(3n) { --n: 2; }