/* Tier 2B cinematic scroll - layout. Pair with cinematic.js.
   Set on the section:
     --cine-edge   the frame's edge colour (cut-frames.sh prints it). The section and the
                   fade at the bottom of the frames use it, so the film melts into the page.
     --cine-fx / --cine-fy   which part of the frame to keep when cropping (0-100, default 50).
     --cine-beat   how tall each text beat is (default 100svh). 3 beats = about 3 scrolls
                   of section, of which the film plays over the last 2.
     --cine-floor  (phones) a strip of plain colour under the film for text to sit on.
   Modifiers: .cine--split (desktop: film right, text left), .cine--floor (phones: later
   beats sit on the floor strip, not over the film). */

.cine {
  --cine-ink: #f7f2ec;
  position: relative;
  background: var(--cine-edge, #151110);
  color: var(--cine-ink);
}

.cine-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  contain: paint;
}

/* --cine-floor leaves a strip of plain section colour under the film on phones, so the
   first screen's text sits on colour and the subject stays clear above it */
.cine-frame {
  position: absolute;
  inset: 0 0 var(--cine-floor, 0) 0;
}

.cine-still,
.cine-still img,
.cine-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cine-still img {
  object-fit: cover;
  object-position: calc(var(--cine-fx, 50) * 1%) calc(var(--cine-fy, 50) * 1%);
}

/* the canvas takes over only once it has drawn the same frame the still shows */
.cine-canvas { opacity: 0; }
.cine-live .cine-canvas { opacity: 1; }

/* the film fades into the section colour at the bottom */
.cine-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--cine-edge, #151110) 0%, transparent 28%);
  pointer-events: none;
}

.cine-beats {
  position: relative;
  margin-top: -100vh;
  margin-top: -100svh;
}

.cine-beat {
  min-height: var(--cine-beat, 100vh);
  min-height: var(--cine-beat, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem 1rem 2rem;
}

/* After the first beat, text rises in once, then holds near the top (over the
   quietest part of the frame) while the film plays underneath. */
.cine-beat + .cine-beat { justify-content: flex-start; }
.cine-beat + .cine-beat .cine-text {
  position: sticky;
  top: var(--cine-top, 4.5rem);
}

/* text over moving frames always sits on its own scrim, so contrast holds in every frame */
.cine-text {
  max-width: 34rem;
  padding: 1.1rem 1.15rem 1.25rem;
  background: color-mix(in srgb, var(--cine-edge, #151110) 84%, transparent);
  border-radius: 4px;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .cine-text { background: rgba(21, 17, 16, 0.84); }
}

/* .cine--floor (phones): with --cine-floor set, the later beats park on the plain strip
   under the film instead of over it, so the moving subject is never covered. */
@media (max-width: 899px) {
  .cine--floor .cine-beat + .cine-beat { justify-content: flex-end; }
  .cine--floor .cine-beat + .cine-beat .cine-text { top: auto; bottom: 0.75rem; }
}

/* desktop: the film sits in the right half, text runs down the left on the plain colour */
@media (min-width: 900px) {
  .cine--split .cine-frame { left: 50%; bottom: 0; }
  .cine--split .cine-beat + .cine-beat { justify-content: center; }
  .cine--split .cine-beat + .cine-beat .cine-text { position: static; }
  .cine--split .cine-frame::after {
    background:
      linear-gradient(to top, var(--cine-edge, #151110) 0%, transparent 22%),
      linear-gradient(to right, var(--cine-edge, #151110) 0%, transparent 14%);
  }
  .cine--split .cine-beat {
    width: 50%;
    justify-content: center;
    padding: 2rem clamp(2rem, 5vw, 5rem);
  }
  .cine--split .cine-text { background: none; padding: 0; }
}