/* =====================================================================
   Chapter sequences — the tablet windows.

   The film holds on its frame and stays visible. Over it, a small window
   opens onto a tablet in the room: real device, real hands, real
   candlelight, cropped tight out of the plate. The interface is filmed
   into the plate rather than layered over it, so the screen is genuinely
   lit from within and a finger can touch the glass.

   One number drives all of it: p, 0 to 1, from scroll position.
   ===================================================================== */

.seq {
  position: absolute; inset: 0; z-index: 5;
  display: grid; align-items: center;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 70px);
  padding: 0 6vw;
  opacity: 0; visibility: hidden;
  transition: opacity 460ms ease;
  pointer-events: none;
}
.seq.on { opacity: 1; visibility: visible; }
/* alternate which side the tablet sits on, so four in a row have rhythm */
.seq.flip .seq-win { order: -1; }

/* ---- the window ---- */
.seq-win {
  position: relative;
  width: 100%;
  /* Must never exceed its own grid column, or it slides under the
     caption. 100% is the column; 74vh keeps it in frame on short screens. */
  max-width: min(100%, 74vh);
  justify-self: center;
  overflow: hidden;
  border-radius: 14px;
  background: #0b100c;
  border: 1px solid rgba(208,169,78,0.18);
  box-shadow:
    0 40px 120px rgba(0,0,0,0.72),
    0 0 0 1px rgba(0,0,0,0.5),
    0 0 90px rgba(208,169,78,0.07);
  transform: translateY(26px) scale(0.97);
  opacity: 0;
  transition: transform 620ms cubic-bezier(.2,.7,.3,1), opacity 520ms ease;
}
.seq.on .seq-win { transform: none; opacity: 1; }

/* The clip, blown up and offset so the crop region fills the window. The
   window's aspect-ratio is set from the crop, so nothing distorts. */
.seq-win video {
  position: absolute;
  display: block;
  border: 0;
  will-change: transform;
}

/* ---- the caption ---- */
.seq-note {
  align-self: center; justify-self: center;
  max-width: 26em;
  opacity: 0; transform: translateY(16px);
  transition: opacity 520ms ease 120ms, transform 520ms ease 120ms;
  text-shadow: 0 2px 26px rgba(0,0,0,0.75);
}
.seq.on .seq-note { opacity: 1; transform: none; }
.seq-note .eyebrow { margin-bottom: 0.7rem; }
.seq-note h2 {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.12; margin-bottom: 0.6rem;
}
.seq-note p { color: #CFD4C6; font-size: clamp(0.95rem, 1.2vw, 1.1rem); margin: 0 0 1rem; }
.seq-bar { width: 120px; height: 2px; border-radius: 2px; background: rgba(208,169,78,0.22); overflow: hidden; }
.seq-bar i { display: block; width: 100%; height: 100%; background: var(--gold, #D0A94E); transform: scaleX(0); transform-origin: 0 50%; }

/* While a window is open the film's own furniture steps back, but the film
   itself stays on screen behind it — that is the whole point. */
body.in-sequence .chapter,
body.in-sequence .scroll-cue,
body.in-sequence .loading-pill { opacity: 0 !important; transition: opacity 320ms ease; pointer-events: none; }

/* Phones: stack the caption under the window. The crop means the tablet is
   framed the same on every device, so these run everywhere. */
@media (max-width: 900px), (orientation: portrait) {
  .seq {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    gap: clamp(16px, 3vh, 30px);
    padding: 0 6vw;
  }
  .seq.flip .seq-win { order: 0; }
  .seq-win { max-width: min(86vw, 52vh); }
  .seq-note { max-width: 34em; text-align: left; }
  .seq-note h2 { font-size: clamp(1.25rem, 5.4vw, 1.9rem); }
  .seq-note p { font-size: clamp(0.88rem, 3.6vw, 1rem); }
}

/* Reduced motion: never mounted (see chapters.js); the static film carries
   the page instead. */