/*
 * Filme continuo («Plano de referencia»). Solo aplica con `html.motion-film`: la A viaja por
 * un mundo que llena el lienzo (opaco) y el compositor ya pone viñeta y grano.
 */

/* El compositor reemplaza la atmósfera, la viñeta y el grano CSS. */
html.motion-film body.post-ready .atmosphere,
html.motion-film body.post-ready .scene-vignette,
html.motion-film body.post-ready .scene-grain {
  display: none;
}

/* Sin compositor (nivel bajo): solo la viñeta, más suave; la atmósfera de retícula sobra. */
html.motion-film .atmosphere {
  display: none;
}

/* El lienzo siempre a pleno: el mundo es el fondo de la página. */
html.motion-film.webgl-ready #webgl-canvas,
html.motion-film .webgl-ready #webgl-canvas {
  opacity: 1;
}

/*
 * Velo de lectura: sobre un mundo iluminado, un velo plano de pantalla completa lo apagaría.
 * Se limita a la columna de texto y se aclara.
 */
html.motion-film .chapter {
  --scrim: linear-gradient(90deg, rgba(4, 5, 6, 0.82) 0%, rgba(4, 5, 6, 0.55) 30%, rgba(4, 5, 6, 0) 58%);
}

html.motion-film .chapter--hero {
  --scrim:
    linear-gradient(90deg, rgba(4, 5, 6, 0.78) 0%, rgba(4, 5, 6, 0.45) 32%, rgba(4, 5, 6, 0) 60%),
    linear-gradient(0deg, rgba(4, 5, 6, 0.5), transparent 34%);
}

html.motion-film .chapter::before,
html.motion-film .chapter.is-active::before {
  opacity: 1;
}

@media (max-width: 820px) {
  html.motion-film .chapter,
  html.motion-film .chapter--hero {
    --scrim: linear-gradient(0deg, rgba(4, 5, 6, 0.86), rgba(4, 5, 6, 0.4) 55%, rgba(4, 5, 6, 0.1));
  }
}

/* Huecos de viaje entre capítulos: solo existen en el filme (ahí la cámara viaja). */
.film-gap {
  display: none;
}

html.motion-film .film-gap {
  display: block;
  height: 60svh;
  pointer-events: none;
}

html.motion-film .film-gap[data-film-gap="inmersivo"] {
  height: 40svh;
}

html.motion-film .film-gap[data-film-gap="proceso"],
html.motion-film .film-gap[data-film-gap="trabajo"] {
  height: 50svh;
}

/* HUD técnico: etiquetas ancladas a los bloques de la A, con líneas plexus. */
.film-hud {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.film-hud__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.film-hud__lead,
.film-hud__mesh {
  stroke: rgba(244, 245, 246, 0.55);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: opacity 180ms linear;
}

.film-hud__mesh {
  stroke: rgba(244, 245, 246, 0.22);
  stroke-dasharray: 2 4;
}

.film-hud__dot {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(244, 245, 246, 0.9);
  border-radius: 50%;
  opacity: 0;
}

.film-hud__label {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 2px;
  font-family: var(--font-tech);
  font-size: 0.5rem;
  letter-spacing: 0.13em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--bone);
  opacity: 0;
}

.film-hud__label b {
  font-weight: 400;
}

.film-hud__label i {
  font-style: normal;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}