/* Layered scenes: one per chapter, built by art-scenes.js. */
.art {
  position: absolute;
  z-index: -1; /* above the chapter's paper fade (::before), below its copy and cards */
  pointer-events: none;
  transform-style: preserve-3d;
}

.art-layer {
  position: absolute;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  user-select: none;
}

.chapter-interlude h2 {
  font-size: clamp(40px, 4.4vw, 68px);
  max-width: 40vw;
}

@media (min-width: 801px) {
  .art-hero     { left: 33vw; width: 70vw; top: 50%; margin-top: -18vw; }
  .art-backend  { left: 36vw; width: 66vw; top: 50%; margin-top: -18.5vw; }
  .art-timeline { left: 45vw; width: 56vw; top: 50%; margin-top: -12vw; }
  .art-journey  { left: 1vw;  width: 40vw; top: 13vh; }
  /* The scene takes the top-left corner, so the eyebrow moves above the title. */
  .chapter-journey .journey-title { flex-direction: column; align-items: flex-end; }
  .art-interlude { left: 22vw; width: 80vw; top: 50%; margin-top: -20vw; }
  .chapter-keep .art-interlude { left: 36vw; width: 68vw; margin-top: -14vw; }

  .chapter-interlude {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 19vh;
  }
}

@media (max-width: 800px) {
  .art {
    position: relative;
    z-index: 0;
    width: 118%;
    margin: 28px -9% 0;
  }
  .art-timeline { width: 130%; margin-left: -15%; }
  .chapter-interlude h2 { max-width: none; }
}

/* Two interlude beats were added to the film, so it gets proportionally longer. */
@media (min-width: 801px) {
  .film { height: 1180vh; }
}

@media (min-width: 801px) {
  /* The paper fade behind each chapter only existed for busy gradients; on flat ink it read as grey haze. */
  .chapter:not(.chapter-hero)::before { display: none; }
  .bg-keep { background: var(--paper); }
}