/* El estudio, sección 02: DISEÑOS. — sobre el azul de la portada, una rejilla de "páginas" de webs.

   Referencia del usuario: gilhuybrecht.com (captura). Cada proyecto son varias capturas pequeñas
   seguidas, con el nombre del proyecto sobre la primera y el número de página encima de cada una,
   alineadas arriba. Al señalar una, se hace más grande y las demás se reorganizan (su fila cede
   sitio y lo de debajo baja); si es una captura larga de la web, además se recorre de arriba abajo.
   Solo llevan imagen las capturas de webs; lo demás, "Espacio libre" en rojo. La cabecera
   (etiqueta y título) es la común de las secciones (.wd__sh, webdesign-chapters.css). Historia de
   esta sección (carrusel, estanterías, fondo negro…), en CLAUDE.md.

   Cómo está hecho: webdesign-work.js reparte las páginas en FILAS (tantas columnas como quepan,
   de 3 a 7) y les pone su cabecera (nombre / número). Cada fila es un flex: todas crecen igual
   (flex: 1) y la señalada crece más (flex-grow), así que la fila se reparte de nuevo — sin
   cambiar de fila nada (que la señalada saltara de fila la haría parpadear bajo el ratón). */

.wd__chap--lib {
  font-family: var(--font-display);
}

.wd__chap--lib :focus-visible {
  outline-color: var(--wd-cream);
}

/* ---------- La rejilla ---------- */

.wd__lib {
  position: relative;
  z-index: 2;
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
}

.wd__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(1.7rem, 4vh, 3rem);
}

/* OJO con el nombre: `.wd__row` ya existe (la fila de la palabra gigante de la ventana 1, en
   webdesign.css, con width: max-content y en columna en móvil) — con ese nombre las filas se
   estiraban a 5 656 px y en móvil salían en columna. Por eso `.wd__gr-row`. */
/* Menos monótona (el usuario: "que siga siendo clara, pero ahora es aburrida"): las filas se mueven
   solas, despacio y en sentidos contrarios (las pares a un lado, las impares al otro, ida y vuelta);
   se paran mientras se señala una web, para verla tranquilo. Las páginas tienen pesos distintos (la
   portada de cada web, más ancha; su segunda página, más alta) y la señalada se enmarca en el
   amarillo de la portada. */
.wd__gr-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.8rem, 1.3vw, 1.3rem);
  animation: wd-row-drift 22s ease-in-out infinite alternate;
  will-change: translate;
}

.wd__gr-row:nth-child(even) {
  animation-direction: alternate-reverse;
  animation-duration: 26s;
}

.wd__grid.has-big .wd__gr-row {
  animation-play-state: paused;
}

@keyframes wd-row-drift {
  from {
    translate: -3.5vw 0;
  }
  to {
    translate: 3.5vw 0;
  }
}

/* una página */
.wd__fr {
  --base: 1;
  --grow: var(--base);
  position: relative;
  flex: var(--grow) 1 0;
  min-width: 0;
  margin: 0;
  color: var(--wd-cream);
  transition: flex-grow 700ms var(--ease-out-expo), opacity 400ms ease;
}

/* una tarjeta por web: todas del mismo peso (antes la portada pesaba más que su segunda página) */
.wd__fr--top,
.wd__fr--cta {
  --base: 1;
}

.wd__fr--empty {
  --base: 0.85;
}

/* huecos para que la última fila no estire sus páginas */
.wd__fr-gap {
  flex: 1 1 0;
  min-width: 0;
}

.wd__fr.is-big {
  --grow: calc(var(--base) * 2.3);
}

.wd__fr.is-big .wd__fr-img {
  box-shadow: 0 0 0 3px var(--wd-yellow), 0 1.8rem 3.2rem -1.2rem rgba(7, 5, 46, 0.75);
}

.wd__fr.is-big .wd__fr-n {
  color: var(--wd-yellow);
}

.wd__grid.has-big .wd__fr:not(.is-big) {
  opacity: 0.45;
}

/* cabecera: el nombre del proyecto (solo en su primera página) y el número de página */
.wd__fr-h {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.wd__fr-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.wd__fr-n {
  font-variant-numeric: tabular-nums;
}

.wd__fr-img {
  position: relative;
  display: block;
  aspect-ratio: var(--ar, 1.4);
  overflow: hidden;
  border-radius: 0.2rem;
  background: #16161a;
  transition: box-shadow 500ms var(--ease-out-expo);
}

.wd__fr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

/* captura de la web: se ve su portada y, al señalarla, se recorre la web entera, despacio (y al
   salir vuelve arriba) — una sola tarjeta por web */
.wd__fr--top.is-big img {
  object-position: 50% 100%;
  transition: object-position 4.2s cubic-bezier(0.45, 0.05, 0.3, 1) 0.35s;
}

.wd__fr--top img {
  transition: object-position 800ms var(--ease-out-expo);
}

/* invitación y huecos libres */
.wd__fr-cta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(0.8rem, 1.4vw, 1.3rem);
  color: var(--wd-cream);
  text-decoration: none;
  /* en rojo: sobre el azul de la sección, la invitación tiene que destacar */
  background: radial-gradient(120% 90% at 100% 0%, #ff6a5e 0%, transparent 60%), var(--wd-coral-hi);
}

/* según el ancho de su tarjeta (el marco es contenedor): con una tarjeta por web, la invitación
   puede quedar estrecha y el texto se cortaba */
.wd__fr--cta .wd__fr-img {
  container-type: inline-size;
}

.wd__cta-t {
  max-width: 12ch;
  font-size: clamp(0.9rem, 10cqi, 1.9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.wd__cta-go {
  align-self: flex-start;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid currentColor;
  font: 500 0.8rem/1 var(--font-mono);
  letter-spacing: 0.06em;
}

/* "Espacio libre": sin imagen, en rojo (petición: "todo lo que no sean webs márcalo como espacios
   libres; no pongas imágenes, o ponlos rojos") — un hueco rojo tenue con una cruz fina */
.wd__fr-empty {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 75, 62, 0.7);
  border-radius: inherit;
  background: rgba(255, 75, 62, 0.08);
  transition: background-color 400ms ease, border-color 400ms ease;
}

.wd__fr-empty::before,
.wd__fr-empty::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1.4rem;
  background: var(--wd-red);
  translate: -50% -50%;
}

.wd__fr-empty::after {
  rotate: 90deg;
}

.wd__fr--empty.is-big .wd__fr-empty {
  border-color: var(--wd-red);
  background-color: rgba(255, 75, 62, 0.12);
}

/* sin el gris oscuro de fondo de las páginas: sobre el azul, el hueco es solo rojo */
.wd__fr--empty .wd__fr-img {
  background: transparent;
}

.wd__fr--empty .wd__fr-h {
  color: var(--wd-red);
}

/* entrada al llegar a la sección: las páginas aparecen una tras otra */
.wd__sec.is-shown.wd__chap--lib .wd__fr {
  animation: wd-fr-in 900ms var(--ease-out-expo) calc(var(--i, 0) * 30ms + 250ms) backwards;
}

@keyframes wd-fr-in {
  from {
    opacity: 0;
    translate: 0 1.2rem;
  }
}

/* ---------- La firma: richsmart (rojo) ⇄ nukleo (claro), en la última celda de la cabecera ---------- */
/* Tres líneas (la tercera repite la primera) en una ventana de una línea de alto: la columna sube
   de una en una y, al llegar a la copia, vuelve a empezar sin salto. Es el mismo "nukleo ×
   richsmart" de la barra de la portada. */
.wd__sh-meta > .wd__sig {
  --line: 1.3em;
  align-self: center;
  align-items: flex-start;
  height: var(--line);
  padding-block: 0;
  overflow: hidden;
  font-size: 1.15rem;
  letter-spacing: 0;
  line-height: var(--line);
  text-transform: none;
  pointer-events: none;
}

.wd__sig-roll {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  animation: wd-sig 7s cubic-bezier(0.7, 0, 0.2, 1) infinite;
}

.wd__sig-w {
  display: block;
  height: var(--line);
  white-space: nowrap;
}

.wd__sig .wd__rm {
  font-size: 1em;
}

.wd__sig-nk {
  color: var(--wd-cream);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
}

@keyframes wd-sig {
  0%,
  42% {
    transform: translateY(0);
  }
  50%,
  92% {
    transform: translateY(calc(-1 * var(--line)));
  }
  100% {
    transform: translateY(calc(-2 * var(--line)));
  }
}

/* ---------- Móvil ---------- */

@media (max-width: 42rem) {
  .wd__fr.is-big {
    --grow: 1.8;
  }
}

@media (prefers-reduced-motion: reduce) and (width < 0px) {
  .wd__gr-row,
  .wd__sec.is-shown.wd__chap--lib .wd__fr,
  .wd__sig-roll {
    animation: none;
  }

  .wd__fr,
  .wd__fr img,
  .wd__fr--top.is-big img {
    transition: none !important;
  }
}

/* ---------- La web EN VIVO dentro de la tarjeta ampliada (webdesign-work.js) ----------
   iframe de 1000 × 1076 (el tamaño de diseño de la mini web) escalado al ancho de la tarjeta (--k).
   Aparece cuando ha cargado (.is-live), deja que su animación de entrada se vea y luego recorre la
   web de arriba abajo (--pan: lo que mide de más que la tarjeta). No recibe toques: manda la tarjeta. */
.wd__fr-live {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 1076px;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(var(--k, 0.3));
  transform-origin: 0 0;
  transition: opacity 350ms ease;
}

.wd__fr-img.is-live .wd__fr-live {
  opacity: 1;
  animation: wd-live-pan 6s cubic-bezier(0.45, 0.05, 0.3, 1) 1.6s infinite alternate both;
}

.wd__fr-img.is-live img {
  opacity: 0;
  transition: opacity 350ms ease;
}

@keyframes wd-live-pan {
  from {
    transform: translateY(0) scale(var(--k, 0.3));
  }
  to {
    transform: translateY(calc(-1 * var(--pan, 0px))) scale(var(--k, 0.3));
  }
}

.wd__fr:has(img):not(.is-big) {
  cursor: pointer;
}

/* Móvil: la ampliada ocupa la fila entera y con la proporción de la web (se ve entera, sin recortar
   ni recorrer); la otra de su fila pasa debajo. */
@media (max-width: 42rem) {
  /* sin el vaivén de las filas: con dos columnas cortaba las tarjetas por los bordes */
  .wd__gr-row {
    flex-wrap: wrap;
    animation: none;
  }

  .wd__fr.is-big {
    flex: 1 0 100%;
  }

  .wd__fr.is-big .wd__fr-img {
    aspect-ratio: 1000 / 1076;
  }
}

/* ---------- Táctil: nada estático (webdesign-work.js) ----------
   Cada tarjeta que se ve (.is-roll) recorre su captura de arriba abajo y vuelve, despacio y cada
   una desfasada (--i); la del centro de la pantalla va además en vivo (.is-live, arriba). Al tocar,
   la tarjeta se hunde un poco: respuesta inmediata antes de ampliarse. */
@media (hover: none) {
  /* con transform (lo mueve la tarjeta gráfica, sin repintar): la imagen a su alto natural
     (1000 × 1076) y desplazada lo que sobresale de la tarjeta: 1 − 1 / (--ar · 1,076) de su alto */
  .wd__fr.is-roll .wd__fr-img img {
    height: auto;
    object-fit: fill;
    animation: wd-roll 9s ease-in-out calc(var(--i, 0) * -1.7s) infinite alternate;
    will-change: transform;
  }

  .wd__fr-img {
    transition: box-shadow 500ms var(--ease-out-expo), scale 180ms ease;
  }

  .wd__fr:active .wd__fr-img {
    scale: 0.96;
  }

  /* en vivo sin ampliar: un marco claro para que se note cuál se está reproduciendo */
  .wd__fr:not(.is-big) .wd__fr-img.is-live {
    box-shadow: 0 0 0 2px var(--wd-yellow, #ffe95c);
  }
}

@keyframes wd-roll {
  to {
    transform: translateY(calc((1 - 1 / (var(--ar, 1.86) * 1.076)) * -100%));
  }
}