/*
 * engine-live.css — the motion-engine film band on the LIVE colabcontent.com.
 * Additive only: no ranking content moves; the two-questions section becomes a
 * scroll-scrubbed cinematic band (human + robot fingertips converging) with the
 * questions PINNED at the near-touch moment.
 *
 * v2: layerMode 'contained' — the film layer rides sticky INSIDE the band, so
 * this file needs ZERO cover rules on the rest of the page. v1's covers
 * collided with the pen-intro machinery in the hero. Nothing here touches any
 * element outside #questions.
 */

/* ============ THE FILM BAND ============ */
.engine-film {
  min-height: 300vh;
  padding: 0 !important;      /* the stage owns the rhythm */
  border-top: 0 !important;   /* cinematic cut, no hairline */
  color: var(--paper);
  position: relative;
}
/* The contained sticky layer eats no layout height (negative bottom margin in
   the primitive CSS), so the stage flows from the band top naturally. */
.engine-stage { position: relative; z-index: 10; padding: 24vh 0 26vh; }

/* Every beat carries its own contrast: no film frame may eat the copy. */
.beat-scrim {
  background: radial-gradient(closest-side, rgba(10,9,8,.72), rgba(10,9,8,.45) 62%, rgba(10,9,8,0));
  border-radius: 28px;
  text-shadow: 0 1px 22px rgba(0,0,0,.85);
}

/* Beat A — the method statement. */
.engine-beat-a { max-width: 760px; padding: 2.6rem 2rem; }

/* Beat B — THE PINNED CENTERPIECE. Sticky inside a tall perspective segment;
   the primitive owns this element's transform (rotateX plane), pin via top. */
.cine-seg { height: 150vh; margin-top: 26vh; perspective: 400px; }
.engine-pin { position: sticky; top: 20vh; padding: 2.4rem 2rem 2.8rem; }

/* The two question cards ride dark glass inside the band. */
.engine-film .framed {
  background: rgba(10, 9, 8, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 181, 133, 0.28);
  border-radius: 20px;
}

/* Beat C — the resolution line, revealed by the primitive (.ssv-revealed). */
.engine-beat-c { margin-top: 30vh; padding: 2rem; max-width: 56ch; }

/* ============ MOBILE ============ */
@media (max-width: 640px) {
  .engine-film { min-height: 280vh; }
  .engine-stage { padding: 18vh 0 20vh; }
  .cine-seg { height: 125vh; margin-top: 18vh; }
  .engine-pin { top: 14vh; padding: 1.6rem 0.9rem 2rem; }
  .engine-beat-a { padding: 1.8rem 1.1rem; }
  .engine-beat-c { margin-top: 16vh; }
}

/* Reduced motion: the primitive renders everything static; band shrinks. */
@media (prefers-reduced-motion: reduce) {
  .engine-film { min-height: 0; }
  .cine-seg { height: auto; }
  .engine-pin { position: static; }
}