/* Ao Redor — shared stage for the looping films (see cine.js).
   A film is a fixed set scaled into its box like a video; the backdrop runs full-bleed behind it. */
.film {
  position: relative; overflow: hidden;
  background: #07070C; color: #F3F3F8;
  font-family: 'Sora', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.film--full { position: fixed; inset: 0; }
.film *, .film *::before, .film *::after { box-sizing: border-box; margin: 0; padding: 0; }

.film .set {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(var(--k, 1));
  transform-origin: 50% 50%;
}
.film[data-mode="l"] .set--p, .film[data-mode="p"] .set--l { display: none; }
.film:not([data-mode]) .set { visibility: hidden; }
/* measuring pass (cine.js): drop every transform so layout reads in set pixels */
.film.is-measure .set, .film.is-measure [data-flat] { transform: none !important; }

.film__bg { position: absolute; inset: 0; }
/* Film grain: white specks from fractal noise. feFuncA stretches the noise contrast so the texture
   actually reads (about 8 levels of variation on the dark set, measured; roughly half the pixels stay clear) while the average lift stays
   where the old flat 5% layer put it (about 6 levels). White on the white mock pages stays invisible. */
.film__grain {
  position: absolute; inset: -64px; pointer-events: none; opacity: .12;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/><feComponentTransfer><feFuncA type='linear' slope='3.8' intercept='-1.85'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
.film__vig {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 88% 82% at 50% 50%, transparent 56%, rgba(0, 0, 0, .52) 100%);
}
.film__fade { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: #07070C; }

/* Chapter marker — segments + "02 · Desenho". Sized in --ui, which cine.js sets so the
   marker reads about 12.5px on screen whatever the film's scale. */
.chap { display: flex; flex-direction: column; gap: calc(var(--ui) * .72); }
.chap__seg { display: flex; gap: calc(var(--ui) * .32); }
.chap__seg i {
  position: relative; display: block; overflow: hidden;
  width: calc(var(--ui) * 2.1); height: max(2px, calc(var(--ui) * .17));
  border-radius: 2px; background: rgba(243, 243, 248, .22);
}
.chap__seg b { position: absolute; inset: 0; background: #FF5A1F; transform-origin: 0 50%; transform: scaleX(0); }
.chap__txt {
  display: flex; align-items: baseline; gap: .8em;
  font: 500 var(--ui)/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
}
.chap__n { color: #FF5A1F; }
.chap__l { color: #F3F3F8; }