/* Ronda 11 · 52 Muro vivo. Muro de 4x5 celdas 4:3 a sangre; cada celda guarda 2-3 renders del mismo proyecto
   que se funden entre sí (solo opacity). Sin JS: se ve el primer render de cada celda. */
.mv { border-top: 1px solid var(--line-strong); }
.mv-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-2) var(--s-3); padding-block: var(--sec) var(--s-3); }
.mv-cab .lead { color: var(--muted); margin-top: var(--s-1); }

.mv-muro { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--bg); }
.mv-celda { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grid); }
.mv-celda > a { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.mv-i { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; }
.mv-i.on { opacity: 1; }
.mv-i.top { z-index: 1; }
.cj .mv-i.top { transition: opacity 1.2s linear; }
.mv-mas { display: none; }

.mv .velo {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 14px; background: rgba(0, 0, 0, 0.55); color: #fff; line-height: 1.3; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; pointer-events: none;
}
.mv .velo-t { font-size: 1rem; font-weight: 500; }
.mv .velo-c { font-size: var(--t-cap); opacity: 0.8; }
.mv-celda > a:focus-visible .velo { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (hover: hover) { .mv-celda > a:hover .velo { opacity: 1; visibility: visible; transition-delay: 0s; } }
.mv-celda > a:focus-visible { outline: none; }
.mv-celda > a:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 3; outline: 3px solid #fff; outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--fg); }

.mv-pie { padding-block: var(--s-3) var(--sec); }
.mv-todos { font-size: var(--t-1); font-weight: 500; line-height: 1.15; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.mv-todos:focus-visible, .mv-mas a:focus-visible { outline: 3px solid var(--fg); outline-offset: 4px; }

@media (max-width: 767px) {
  .mv-muro { grid-template-columns: repeat(3, 1fr); }
  .mv-mas { display: flex; aspect-ratio: 4 / 3; align-items: flex-end; padding: 8px; background: var(--fg); }
  .mv-mas a { color: #fff; font-family: var(--mono); font-size: 0.6875rem; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.25em; }
  .mv-mas a:focus-visible { outline-color: #fff; }
  .mv .velo { padding: 8px; }
  .mv .velo-t { font-size: 0.75rem; }
  .mv .velo-c { font-size: 0.6875rem; }
  .mv-pie { display: none; }
  .mv-cab { padding-bottom: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) { .cj .mv-i.top { transition: none; } }

/* Respiración: zoom 1 -> 1,06 con deriva de 1-2 % en todas las imágenes de la celda a la vez (mismo reloj por celda,
   así el fundido no salta de escala). Solo transform. Duración y fase distintas por celda. Solo con JS y sin reduced-motion. */
@keyframes mv-resp-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-1.2%, -0.8%, 0) scale(1.06); } }
@keyframes mv-resp-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(1.2%, 0.8%, 0) scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  .cj .mv-celda { --mv-d: 18s; --mv-o: 0s; }
  .cj .mv-celda:nth-child(4n+1) { --mv-d: 16s; }
  .cj .mv-celda:nth-child(4n+2) { --mv-d: 19s; }
  .cj .mv-celda:nth-child(4n+3) { --mv-d: 22s; }
  .cj .mv-celda:nth-child(4n+4) { --mv-d: 17.5s; }
  .cj .mv-celda:nth-child(5n+2) { --mv-o: -4s; }
  .cj .mv-celda:nth-child(5n+3) { --mv-o: -8s; }
  .cj .mv-celda:nth-child(5n+4) { --mv-o: -12s; }
  .cj .mv-celda:nth-child(5n+5) { --mv-o: -15s; }
  .cj .mv-i {
    animation: mv-resp-a var(--mv-d) var(--mv-o) ease-in-out infinite alternate;
    transform-origin: 50% 50%;
  }
  .cj .mv-celda:nth-child(even) .mv-i { animation-name: mv-resp-b; }
  .cj .mv-i.on { will-change: transform; }
  /* congelada: celda con ratón o foco, fuera de pantalla o pestaña oculta */
  .cj .mv-celda:hover .mv-i, .cj .mv-celda:focus-within .mv-i, .cj .mv-muro[data-quieto] .mv-i { animation-play-state: paused; }
  .cj .mv-muro[data-quieto] .mv-i.on { will-change: auto; }
}