@charset "UTF-8";
/*
 * Visor de obra — traído de portafolio-arte-2 (app/Wall.module.css) y adaptado
 * a la grilla de obras de este sitio.
 *
 * Dos gestos, los mismos de allá:
 *
 *   1. Pasar por encima de una obra la hace bambolear como un cuadro colgado
 *      que alguien roza. El movimiento no vive en :hover sino en una clase que
 *      se quita en `animationend`: si dependiera del hover, sacar el mouse a
 *      mitad del vaivén cortaría el péndulo y el cuadro volvería de golpe.
 *      Así siempre termina de apagarse solo, que es lo que hace un cuadro
 *      de verdad.
 *
 *   2. Al hacer clic, la obra se despega de la pared y viaja al centro de la
 *      pantalla (1,4s). Recién cuando llega se enciende el fondo oscuro: el
 *      viaje se ve sobre la página, no sobre un telón. Un segundo clic la
 *      amplía todavía más; clic afuera o Esc y vuelve a su lugar haciendo el
 *      mismo camino al revés.
 */

/* --lift crece durante el vaivén y alarga la sombra: el cuadro se despega
   de la pared. Sin @property el navegador no puede interpolar un número
   dentro de un calc(), así que el vaivén se vería a saltos. */
@property --lift {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* La escala del zoom se anima sola porque el fotograma final de liftToViewer
   la usa: al cambiar la variable, el valor congelado del `animation-fill-mode`
   se recalcula y transiciona. */
@property --zoom-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

/* ---------------------------------------------------- 1 · el vaivén */
.obras__item {
  --rest: 0deg;
  --nail: 50% 4%;
  --amp: 0.9;
  --dir: 1;
  --dur: 1.5s;
  --lift: 0;
  rotate: var(--rest);
  /* El clavo: todo cuadro colgado gira alrededor del punto del que cuelga,
     no de su centro, y no todos cuelgan del mismo lugar. */
  transform-origin: var(--nail);
  filter: drop-shadow(
    calc(var(--lift) * 0.35vw)
    calc(0.25vw + var(--lift) * 0.7vw)
    calc(0.5vw + var(--lift) * 1vw)
    rgba(var(--tinta-rgb, 7, 33, 66), 0.28)
  );
  will-change: rotate, filter;
}
.obras__item .obras__img {
  cursor: zoom-in;
}
.obras__item--balanceo {
  animation-duration: var(--dur);
  animation-timing-function: cubic-bezier(0.33, 0, 0.24, 1);
}
.obras__item--corto {
  animation-name: obraCorto;
}
.obras__item--medio {
  animation-name: obraMedio;
}
.obras__item--lento {
  animation-name: obraLento;
}

@keyframes obraCorto {
  0%   { rotate: var(--rest); --lift: 0; }
  14%  { rotate: calc(var(--rest) + 1.35deg * var(--amp) * var(--dir)); --lift: 1; }
  38%  { rotate: calc(var(--rest) - 0.72deg * var(--amp) * var(--dir)); --lift: 0.61; }
  64%  { rotate: calc(var(--rest) + 0.3deg  * var(--amp) * var(--dir)); --lift: 0.19; }
  86%  { rotate: calc(var(--rest) - 0.1deg  * var(--amp) * var(--dir)); --lift: 0; }
  100% { rotate: var(--rest); --lift: 0; }
}
@keyframes obraMedio {
  0%   { rotate: var(--rest); --lift: 0; }
  11%  { rotate: calc(var(--rest) + 1.5deg  * var(--amp) * var(--dir)); --lift: 0.95; }
  29%  { rotate: calc(var(--rest) - 0.95deg * var(--amp) * var(--dir)); --lift: 0.76; }
  48%  { rotate: calc(var(--rest) + 0.55deg * var(--amp) * var(--dir)); --lift: 0.45; }
  67%  { rotate: calc(var(--rest) - 0.28deg * var(--amp) * var(--dir)); --lift: 0.15; }
  85%  { rotate: calc(var(--rest) + 0.12deg * var(--amp) * var(--dir)); --lift: 0; }
  100% { rotate: var(--rest); --lift: 0; }
}
@keyframes obraLento {
  0%   { rotate: var(--rest); --lift: 0; }
  9%   { rotate: calc(var(--rest) + 1.6deg  * var(--amp) * var(--dir)); --lift: 0.92; }
  24%  { rotate: calc(var(--rest) - 1.05deg * var(--amp) * var(--dir)); --lift: 0.84; }
  40%  { rotate: calc(var(--rest) + 0.68deg * var(--amp) * var(--dir)); --lift: 0.58; }
  56%  { rotate: calc(var(--rest) - 0.42deg * var(--amp) * var(--dir)); --lift: 0.32; }
  72%  { rotate: calc(var(--rest) + 0.24deg * var(--amp) * var(--dir)); --lift: 0.06; }
  87%  { rotate: calc(var(--rest) - 0.1deg  * var(--amp) * var(--dir)); --lift: 0; }
  100% { rotate: var(--rest); --lift: 0; }
}

/* La obra levantada deja su hueco en la pared, y el hueco tiene que ser la
   pared: si no, se ve el recuadro oscuro del contenedor —que existe para que
   las obras no destellen en blanco mientras cargan— y su sombra colgada, un
   rectángulo negro flotando donde ya no hay nada.

   El prefijo `body.pared` hace falta en la sombra: la regla que la pone también
   lo lleva, y sin él esta tendría menos especificidad y no la apagaría. */
.obras__item--levantada .obras__img img {
  visibility: hidden;
}
.obras__item--levantada .obras__img,
body.pared .obras__item--levantada .obras__img {
  background: transparent;
  box-shadow: none;
}
/* Y el relieve del cuadro colgado tampoco tiene ya nada que levantar. */
.obras__item--levantada {
  filter: none;
}

/* ------------------------------------------------- 2 · el visor */
body.visor-abierto {
  overflow: hidden;
}

.visor {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: transparent;
  pointer-events: none;
}
/* El fondo entra recién cuando la obra llegó al centro. */
.visor--listo {
  background: rgba(var(--profundo-rgb, 2, 11, 22), 0.86);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  pointer-events: auto;
  cursor: zoom-out;
  animation: visorIn 240ms ease-out both;
}
.visor--cerrando {
  animation: visorOut 1.4s linear both;
  pointer-events: none;
}

.visor__pieza {
  position: fixed;
  z-index: 1001;
  margin: 0;
  display: block;
  height: auto;
  pointer-events: none;
  transform-origin: center center;
  --zoom-scale: 1;
  transition: --zoom-scale 320ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: liftToViewer 1.4s linear both;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75);
}
.visor__pieza--listo {
  pointer-events: auto;
  cursor: zoom-in;
}
.visor__pieza--zoom {
  cursor: zoom-out;
  --zoom-scale: 1.65;
  z-index: 1002;
}
.visor__pieza--vuelve {
  animation-direction: reverse;
}

@keyframes liftToViewer {
  from {
    transform: translate(0, 0) scale(var(--zoom-scale)) rotate(0deg);
  }
  68% {
    transform: translate(calc(var(--travel-x) * 0.18), calc(var(--travel-y) * 0.15))
               scale(calc(var(--travel-scale) * var(--zoom-scale))) rotate(0.8deg);
  }
  to {
    transform: translate(var(--travel-x), var(--travel-y))
               scale(calc(var(--travel-scale) * var(--zoom-scale))) rotate(0deg);
  }
}
@keyframes visorIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes visorOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* -------------------------------------------------- 3 · la ficha */
.visor__ficha {
  position: fixed;
  z-index: 1003;
  left: 50%;
  bottom: 5vh;
  width: min(90vw, 38rem);
  margin: 0;
  padding: 0;
  text-align: center;
  color: var(--papel, #f4f6f8);
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.visor__ficha--listo {
  animation: fichaIn 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.visor__serie {
  display: block;
  margin-bottom: 1.2rem;
  font-size: 1.2rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--acento-claro, #ff4d5a);
  font-family: "futura_m";
}
.visor__titulo {
  font-size: 2.8rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  font-family: "futura_de";
}
.visor__ayuda {
  margin-top: 1.6rem;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  color: rgba(var(--papel-rgb, 244, 246, 248), 0.55);
  font-family: "futura_m";
}

@keyframes fichaIn {
  from { -webkit-transform: translateX(-50%) translateY(0.8rem); transform: translateX(-50%) translateY(0.8rem); opacity: 0; }
  to { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); opacity: 1; }
}

@media screen and (max-width: 768px) {
  .visor__titulo {
    font-size: 2rem;
  }
  .visor__ficha {
    bottom: 3vh;
  }
}

/* Quien pidió menos movimiento no ve ni el péndulo ni el viaje. */
@media (prefers-reduced-motion: reduce) {
  .obras__item--balanceo {
    animation: none;
  }
  .visor__pieza {
    animation-duration: 1ms;
  }
  .visor--cerrando {
    animation-duration: 1ms;
  }
}