/* ==========================================================================
   MUTAR — Imagen: capturas, fondos y figuras
   Tres cosas:

   1 · Una reticula muy tenue detras de los frames de texto. Nunca encima
       de una captura: ahi la imagen manda.
   2 · Las capturas del prototipo andando (media/capture-*.mp4) de fondo,
       con su color real. El velo solo cubre el lado del texto.
   3 · .fig — la imagen enmarcada con epigrafe que llena cada frame.

   En export y con prefers-reduced-motion el video se reemplaza por su
   poster, que js/capture.js resuelve.
   ========================================================================== */

:root {
  --proto-cell: clamp(3.25rem, 5.5vw, 5.25rem);
}

/* ---- 1 · Reticula --------------------------------------------------------- */
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  color-mix(in srgb, currentColor 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, currentColor 5%, transparent) 1px, transparent 1px);
  background-size: var(--proto-cell) var(--proto-cell);
  -webkit-mask-image: radial-gradient(135% 100% at 50% 45%, #000 8%, transparent 70%);
          mask-image: radial-gradient(135% 100% at 50% 45%, #000 8%, transparent 70%);
}
/* sobre una captura la reticula solo ensucia: fuera */
.frame--capture::after { display: none; }

.frame__inner { position: relative; z-index: 1; }
.frame__tag { z-index: 1; }

/* ==========================================================================
   2 · CAPTURAS
   ========================================================================== */

.frame--capture { overflow: hidden; }

/* El ground del frame, no el del body: el body cruza de color mientras se
   scrollea y el velo no tiene que cambiar de tinte a mitad de camino.    */
.frame--capture[data-ground="bone"]   { --capture-ground: var(--bone); }
.frame--capture[data-ground="ink"]    { --capture-ground: var(--ink); }
.frame--capture[data-ground="violet"] { --capture-ground: var(--violet); }

.frame--capture[data-accent="pink"]   { --capture-accent: var(--pink); }
.frame--capture[data-accent="lime"]   { --capture-accent: var(--lime); }
.frame--capture[data-accent="yellow"] { --capture-accent: var(--yellow); }
.frame--capture[data-accent="cyan"]   { --capture-accent: var(--cyan); }
.frame--capture[data-accent="violet"] { --capture-accent: var(--violet); }
.frame--capture[data-accent="orange"] { --capture-accent: var(--orange); }

.capture {
  --cg: var(--capture-ground, var(--ground));
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--cg);
  opacity: 0;
  transition: opacity 1.2s var(--ease-soft);
}
.capture.is-live { opacity: 1; }

/* El video entra con su color. Un pelo mas oscuro para que el blanco del
   titular no compita con los blancos del galpon virtual.                  */
.capture__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) brightness(0.86) contrast(1.04);
  transform: scale(1.02);
}

/* Velo: solo del lado del texto. De la mitad para la derecha la captura
   queda limpia.                                                          */
.capture__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--cg) 88%, transparent) 0%,
      color-mix(in srgb, var(--cg) 70%, transparent) 30%,
      color-mix(in srgb, var(--cg) 12%, transparent) 58%,
      transparent 75%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--cg) 55%, transparent) 0%,
      transparent 22%);
}

/* Portada y cierre: texto centrado. El velo baja parejo, en viñeta.     */
.capture--center .capture__veil {
  background:
    radial-gradient(70% 60% at 50% 50%,
      color-mix(in srgb, var(--cg) 62%, transparent) 0%,
      color-mix(in srgb, var(--cg) 30%, transparent) 60%,
      color-mix(in srgb, var(--cg) 10%, transparent) 100%);
}

/* Hero: la captura es el frame. Casi sin velo, solo el pie para el HUD. */
.capture--hero .capture__media { filter: saturate(1.12) brightness(0.92); }
.capture--hero .capture__veil {
  background:
    radial-gradient(62% 52% at 50% 52%, color-mix(in srgb, var(--cg) 62%, transparent), color-mix(in srgb, var(--cg) 20%, transparent) 80%),
    linear-gradient(0deg, color-mix(in srgb, var(--cg) 60%, transparent) 0%, transparent 25%);
}

/* La tesis: la planta del mundo MUTAR de fondo, en claro, como plano.   */
.capture--plan .capture__media { filter: saturate(0.2) brightness(1.08) contrast(0.9); opacity: 0.35; }
.capture--plan .capture__veil { background: linear-gradient(90deg, color-mix(in srgb, var(--cg) 70%, transparent), transparent 70%); }

/* Marcas de encuadre, finas. Dicen "esto es material de captura".       */
.capture__marks {
  position: absolute;
  inset: clamp(0.9rem, 2.2vh, 1.7rem);
}
.capture__marks i {
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--capture-accent, var(--accent)) 90%, transparent);
}
.capture__marks i:nth-child(1) { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.capture__marks i:nth-child(2) { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
.capture__marks i:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.capture__marks i:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

/* HUD abajo a la derecha, con fondo propio: va sobre imagen limpia.     */
.capture__hud {
  position: absolute;
  right: calc(var(--pad-x) + 3.5rem);
  bottom: clamp(1rem, 3.5vh, 2.25rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bone) 75%, transparent);
}
.capture__rec {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pink);
  flex: none;
  animation: proto-rec 1.4s steps(1, end) infinite;
}
@keyframes proto-rec {
  0%, 54%   { opacity: 1; }
  55%, 100% { opacity: 0.16; }
}
.capture__tc {
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 46rem) {
  .capture__hud { right: var(--pad-x); gap: 0.5rem; }
  .capture__hud > span:nth-child(2) { display: none; }
  /* en vertical el texto ocupa todo el ancho: el velo pasa a ser parejo */
  .capture__veil {
    background: linear-gradient(0deg,
      color-mix(in srgb, var(--cg) 78%, transparent) 0%,
      color-mix(in srgb, var(--cg) 55%, transparent) 100%);
  }
}

/* ==========================================================================
   3 · FIGURAS
   La imagen enmarcada con epigrafe. Misma familia visual que las marcas de
   encuadre de las capturas: borde fino, esquinas de color, mono chica.
   ========================================================================== */
.fig {
  position: relative;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
.fig__frame {
  position: relative;
  overflow: hidden;
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  box-shadow: 0 0 0 1px var(--hairline), 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.45);
  aspect-ratio: var(--ar, 16 / 9);
}
.fig__frame > img,
.fig__frame > video,
.fig__frame > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-soft);
}
.fig:hover .fig__frame > img { transform: scale(1.025); }
/* esquinas de encuadre, como en las capturas */
.fig__frame::before,
.fig__frame::after {
  content: "";
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  border: 1.5px solid var(--accent);
  z-index: 1;
  pointer-events: none;
}
.fig__frame::before { top: 0.7rem; left: 0.7rem; border-right: 0; border-bottom: 0; }
.fig__frame::after  { bottom: 0.7rem; right: 0.7rem; border-left: 0; border-top: 0; }
.fig figcaption {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.fig figcaption b { font-weight: 400; color: var(--accent-text); white-space: nowrap; }

/* Dos columnas: texto y figura. En angosto se apilan, figura abajo.     */
.duo {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .duo { grid-template-columns: 1fr 1.05fr; }
  .duo--wide { grid-template-columns: 0.9fr 1.3fr; }
  .duo--flip > :first-child { order: 2; }
}
.duo > * { min-width: 0; }
.duo .beats { grid-template-columns: 1fr; gap: 1rem; }

/* Banda: figura a lo ancho, recortada en panoramico */
.fig--band { margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.fig--band .fig__frame { --ar: 21 / 8; }

/* ---- Export y reduced motion -------------------------------------------- */
body.export .frame::after { display: none; }
body.export .capture { opacity: 1; transition: none; }
body.export .capture__hud { display: none; }
body.export .fig__frame { box-shadow: 0 0 0 1px var(--hairline); }

@media (prefers-reduced-motion: reduce) {
  .capture__rec { animation: none; opacity: 1; }
  .capture { transition: none; }
  .fig__frame > img { transition: none; }
}

/* cierre: tres lineas grandes sobre la maqueta, el velo sube */
.frame--closing .capture__veil { background: radial-gradient(75% 65% at 50% 50%, color-mix(in srgb, var(--cg) 84%, transparent) 0%, color-mix(in srgb, var(--cg) 55%, transparent) 70%, color-mix(in srgb, var(--cg) 30%, transparent) 100%); }