/* ==========================================================================
   GS01 — SELECTED WORKS
   Valores en css/variables.css, sección 11. La colocación de las portadas
   la calcula js/works.js; aquí solo su aspecto.
   ========================================================================== */

/* En esta página la rueda mueve la página, no la rejilla del fondo: el
   fondo se queda fijo (usa su propia variable, sin tocar background.js) */
.page-works {
  --grid-scroll-speed: 0;
}

/* Lienzo del grid: js/works.js le da el alto para que quepan todas */
.works {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.work {
  position: absolute; /* left, top y width los pone js/works.js */
}

.work-link {
  position: relative;
  display: block;
}

/* Lo que crecerá y se inclinará en el hover (parada 2); en reposo, nada */
.work-tilt {
  position: relative;
  display: block;
}


/* --------------------------------------------------------------------------
   SOMBRA — impreso apoyado sobre papel: un rectángulo del tono oscuro,
   desplazado hacia donde no llega la luz (arriba a la izquierda) y algo
   desenfocado. Es una capa propia, no box-shadow, para poder moverla solo
   con transform y opacity. Aparece justo cuando el escáner termina de
   descubrir la portada.
   -------------------------------------------------------------------------- */
.work-shadow {
  position: absolute;
  inset: 0;
  background: var(--works-shadow-color);
  filter: blur(calc(var(--works-shadow-blur) * var(--u)));
  transform: translate(calc(var(--works-shadow-x) * var(--u)), calc(var(--works-shadow-y) * var(--u)));
  opacity: 0;
  pointer-events: none;
}

.work.is-in .work-shadow {
  opacity: var(--works-shadow-opacity);
  /* Justo al terminar el escáner, como un impreso que se acaba de apoyar */
  transition: opacity 200ms ease-out var(--works-reveal-duration);
}

/* Sombra lejana: la misma, mucho más difusa. En reposo no se ve; al
   levantarse la portada, js/works.js la funde con la cercana para que la
   sombra parezca más blanda sin animar el desenfoque (solo opacity) */
.work .work-shadow.work-shadow-far,
.work.is-in .work-shadow.work-shadow-far {
  filter: blur(calc(var(--works-shadow-blur) * 3 * var(--u)));
  opacity: 0;
  transition: none;
}

/* La portada levantada pasa por encima de sus vecinas mientras crece; su
   sombra la mueve js/works.js fotograma a fotograma, sin transición */
.work.is-lifted {
  z-index: 3;
}

.work.is-lifted .work-shadow {
  transition: none;
}

.work-media {
  position: relative;
  display: block;
  clip-path: inset(0 0 100% 0); /* oculta hasta que entra en pantalla */
}

/* La caja tiene la proporción de la portada (la pone js/works.js); en el
   hover, las demás imágenes se recortan a esa caja, como un gif */
.work-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   HOVER (solo con ratón): título pequeño bajo la portada, en Light.
   También aparece con el foco del teclado (sin pasar imágenes).
   -------------------------------------------------------------------------- */
.work-title {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: calc(var(--works-hover-title-gap) * var(--u));
  color: var(--works-hover-title-color);
  font: var(--works-title-weight) calc(var(--works-hover-title-size) * var(--u)) / 1.1 var(--font-family);
  letter-spacing: var(--works-title-tracking);
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .work-link:hover .work-title { opacity: 1; }
}

.work-link:focus-visible .work-title { opacity: 1; }


/* --------------------------------------------------------------------------
   APARICIÓN — como un escáner: una línea recorre la portada de arriba abajo
   y la va descubriendo, a velocidad constante. Sin desenfoque ni escala.
   -------------------------------------------------------------------------- */
.work.is-in .work-media {
  animation: works-scan var(--works-reveal-duration) linear forwards;
}

.work-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: max(1px, calc(2 * var(--u)));
  background: var(--works-scan-color);
  opacity: 0;
  pointer-events: none;
}

.work.is-in .work-media::after {
  animation: works-scan-line var(--works-reveal-duration) linear forwards;
}

@keyframes works-scan {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes works-scan-line {
  0%   { top: 0;    opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}


/* --------------------------------------------------------------------------
   ETIQUETA [SELECTED WORKS], fija abajo a la derecha
   -------------------------------------------------------------------------- */
.works-label {
  position: fixed;
  z-index: 2;
  right: calc(var(--works-label-right) * var(--u));
  bottom: calc(var(--works-label-bottom) * var(--u));
  margin: 0;
  color: var(--works-label-color);
  font: var(--font-primary) calc(var(--works-label-size) * var(--u)) / 1 var(--font-family);
  white-space: nowrap;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Foco del teclado visible sobre las portadas
   -------------------------------------------------------------------------- */
.work-link:focus-visible {
  outline: 2px solid var(--gunmetal);
  outline-offset: 4px;
}


/* --------------------------------------------------------------------------
   Movimiento reducido: las portadas aparecen sin animación
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .work.is-in .work-media { animation: none; clip-path: none; }
  .work.is-in .work-media::after { animation: none; }
  .work.is-in .work-shadow { transition: none; }
}


/* ==========================================================================
   PROYECTO ABIERTO (js/project.js)
   Velo sobre toda la página (también el logo y la etiqueta, como en el
   diseño), tira horizontal en bucle y título a la derecha.
   ========================================================================== */
.project {
  position: fixed;
  inset: 0;
  z-index: 50; /* por encima de la página, por debajo del panel de ajustes */
  opacity: 0;
  transition: opacity var(--works-open-duration) ease-out;
  overscroll-behavior: contain;
  touch-action: none; /* en táctil, el deslizamiento lo lleva js/project.js */
}

.project[hidden] { display: none; }
.project.is-open { opacity: 1; }
.project:focus { outline: none; }

/* Clic en el velo = cerrar */
.project-veil {
  position: absolute;
  inset: 0;
  background: var(--works-veil-color);
  opacity: var(--works-veil-opacity);
}

/* Tira: cada imagen la coloca js/project.js (posición, tamaño y giro) */
.project-strip {
  position: absolute;
  inset: 0;
  perspective: var(--works-curve-perspective);
  pointer-events: none; /* los clics fuera de las imágenes llegan al velo */
}

.project-item {
  position: absolute;
  left: 0;
  top: 50%;
  margin: 0;
  pointer-events: auto;
  will-change: transform;
}

.project-item img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Capa que se inclina en el hover (js/project.js); la figura no se mueve */
.project-tilt {
  display: block;
  width: 100%;
  height: 100%;
}

.project-title {
  position: absolute;
  left: calc(var(--works-title-left) * var(--u));
  top: calc(var(--works-title-top) * var(--u));
  margin: 0;
  color: var(--works-title-color);
  font: var(--works-title-weight) calc(var(--works-title-size) * var(--u)) / calc(var(--works-title-leading) * var(--u)) var(--font-family);
  letter-spacing: var(--works-title-tracking);
  /* Sube la caja para que --works-title-top marque la parte alta de las
     mayúsculas, como en el diseño (calibrado con la fuente) */
  margin-top: -0.094em;
  white-space: pre-line; /* los saltos de línea del título se respetan */
  pointer-events: none;
}

/* Cerrar: invisible con ratón (se cierra con clic fuera, Esc o atrás);
   aparece al llegar con el teclado */
.project-close {
  position: absolute;
  right: calc(var(--works-label-right) * var(--u));
  top: calc(var(--works-title-top) * var(--u));
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--works-title-color);
  font: var(--font-primary) calc(var(--works-label-size) * var(--u)) / 1 var(--font-family);
  opacity: 0;
}

.project-close:focus-visible {
  opacity: 1;
  outline: 2px solid var(--works-title-color);
  outline-offset: 4px;
}

/* Con el proyecto abierto, la página no se desplaza por debajo */
.page-works.is-project-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .project { transition: none; }
}