/* A single documentary interlude. It is intentionally not a new card system. */
.process-film {
  position: relative;
  min-height: 100svh;
  background: #e7e1d7;
  color: #f7f2ea;
  overflow: clip;
}

.process-film__stage {
  position: relative;
  height: 100svh;
  min-height: 620px;
  isolation: isolate;
  overflow: hidden;
  background: #11100e;
  perspective: 1300px;
}

.process-film__media,
.process-film__media video,
.process-film__veil,
.process-film__exit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.process-film__media {
  z-index: 0;
  transform: scale(1.055);
  transform-style: preserve-3d;
  will-change: transform;
}

.process-film__media video {
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  background: transparent;
  pointer-events: none;
}

.process-film__veil {
  z-index: 1;
  pointer-events: none;
  opacity: .42;
  background: linear-gradient(90deg, rgba(16, 14, 10, .72) 0%, rgba(16, 14, 10, .36) 34%, rgba(16, 14, 10, .04) 66%, rgba(16, 14, 10, .30) 100%);
}

.process-film__exit {
  z-index: 2;
  inset: 19% 4% -48%;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 56%, 0) rotateX(-11deg) scale(.91);
  transform-origin: center bottom;
  will-change: transform, opacity;
  background: #151411;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .48);
}

.process-film__exit::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(180deg, rgba(20, 18, 15, 0) 46%, rgba(20, 18, 15, .56) 100%);
}

.process-film__exit img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.process-film__copy {
  position: absolute;
  z-index: 3;
  top: clamp(7rem, 16vh, 12rem);
  left: clamp(1.5rem, 8vw, 9rem);
  width: min(38rem, calc(100% - 3rem));
  text-shadow: 0 1px 26px rgba(0, 0, 0, .24);
}

.process-film__kicker {
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.45;
  text-transform: uppercase;
}

.process-film__kicker { color: #ff6b2c; }

.process-film h2 {
  max-width: 8ch;
  margin: .9rem 0 1.2rem;
  color: #fffaf3;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(3.7rem, 7.3vw, 8.3rem);
  font-weight: 400;
  letter-spacing: -.048em;
  line-height: .86;
}

.process-film__copy > p:last-child {
  max-width: 29rem;
  margin: 0;
  color: rgba(255, 250, 243, .92);
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.45;
}

.process-film.has-media-error .process-film__stage {
  background: #1c1813 url('../public/video/carpet-extraction-process-poster.webp') center / cover no-repeat;
}

@media (max-width: 767px) {
  .process-film { min-height: auto; background: #e7e1d7; }

  .process-film__stage {
    min-height: 0;
    height: auto;
    aspect-ratio: .82;
    background: #1c1813 url('../public/video/carpet-extraction-process-poster.webp') center / cover no-repeat;
  }

  .process-film__media { display: block; }
  .process-film__exit { display: none; }
  .process-film__veil { background: linear-gradient(180deg, rgba(15, 13, 10, .66) 0%, rgba(15, 13, 10, .12) 48%, rgba(15, 13, 10, .72) 100%); }

  .process-film__copy {
    top: 2.6rem;
    left: 1.3rem;
    width: calc(100% - 2.6rem);
  }

  .process-film h2 { max-width: 7.4ch; font-size: clamp(3.35rem, 16vw, 5.2rem); }
  .process-film__copy > p:last-child { max-width: 20rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .process-film__stage { background: #1c1813 url('../public/video/carpet-extraction-process-poster.webp') center / cover no-repeat; }
  .process-film__media { display: block; transform: none; }
  .process-film__exit { display: none; }
}

/* A saída do filme mostrava a MESMA sala de reunião que abre a seção seguinte
   (matéria 4D): na passagem, as duas ficavam na tela juntas — "imagem duplicada".
   No desktop ela some, como já sumia no celular e com movimento reduzido; o filme
   termina escurecendo e a sala aparece uma vez só, na seção de baixo. */
.process-film__exit { display: none; }