/* ==========================================================================
   01 — AI VIDEO showcase (Phase 2)
   Grows around the Phase 1 LOCK: in motion modes the landscape frame is the
   hero's lead fragment, landed on .chapter__media. Copy, CTA and the vertical
   reel are hidden through the lock and revealed after it by js/ai-video.js.
   Static mode (no JS / reduced motion) shows everything in normal flow.
   ========================================================================== */

/* ---- Featured film: the frame itself is the control ----
   Lives inside .chapter__media (the Phase 1 landing target) so the geometry
   Phase 1 measures is untouched. In motion modes the media box is hidden but
   the link stays visible above the landed lead fragment. */
.chapter__feature {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  visibility: visible;
}
.chapter__feature:focus-visible { outline-offset: -4px; outline-color: var(--white); }
.chapter__feature .chapter__play { pointer-events: none; }

/* Play affordance response: a thin outer ring, never a big button. */
.chapter__play::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  opacity: 0;
  transform: scale(1);
  transition: transform 280ms var(--ease-mech), opacity 280ms var(--ease-mech);
}
.chapter__feature:hover .chapter__play::before,
.chapter__feature:focus-visible .chapter__play::before {
  opacity: 0.7;
  transform: scale(1.22);
}

/* Preview video (only when a slot has data-preview-src) */
.preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 200ms linear;
}
.is-previewing .preview { opacity: 1; }

/* ---- Copy & CTA ---- */
.chapter__lead {
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  max-width: 21em;
}
.chapter__body {
  margin-top: 10px;
  color: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 30em;
}

.chapter__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  padding-block: 10px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  font-stretch: var(--stretch-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
}
.chapter__cta-arrow {
  color: var(--mas-red);
  font-size: 14px;
  transition: transform var(--dur-ui) var(--ease-mech);
}
.chapter__cta:hover .chapter__cta-arrow { transform: translateX(4px); }

/* ---- Vertical reel: narrow cinematic frames + editorial labels ---- */
.reel {
  display: flex;
  margin: 0;
  padding: 0;
}
.reel__item { min-width: 0; }

.reel__link {
  display: block;
  color: var(--ink);
  text-decoration: none;
}
.reel__link:focus-visible { outline-offset: 4px; }

.reel__frame {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #111214;
  transform-origin: 50% 100%;
  transition: transform 280ms var(--ease-mech), opacity 280ms var(--ease-mech);
}
.reel__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* TEMPORARY comp crops carry slivers of the reference's frame edges. */
  transform: scale(1.1);
}

.reel__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 10.5px;
  font-weight: 600;
  font-stretch: var(--stretch-ui);
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.reel__label::before {
  content: "";
  width: 10px;
  height: 2px;
  background: var(--mas-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms var(--ease-mech);
}

/* HOVER / FOCUS → PREVIEW: the selected frame lifts slightly, the others recede. */
.reel__link:focus-visible .reel__frame { transform: scale(1.04); }
.reel__link:focus-visible .reel__label::before { transform: scaleX(1); }
.reel:has(.reel__link:focus-visible) .reel__link:not(:focus-visible) .reel__frame { opacity: 0.55; transform: scale(0.985); }

@media (hover: hover) and (pointer: fine) {
  .reel__link:hover .reel__frame { transform: scale(1.04); }
  .reel__link:hover .reel__label::before { transform: scaleX(1); }
  .reel:has(.reel__link:hover) .reel__link:not(:hover) .reel__frame { opacity: 0.55; transform: scale(0.985); }
}

@media (prefers-reduced-motion: reduce) {
  .chapter__play::before,
  .chapter__cta-arrow,
  .reel__frame,
  .reel__label::before,
  .preview { transition: none; }
  /* State still changes (focus/hover feedback), without the scale. */
  .reel__link:focus-visible .reel__frame,
  .reel__link:hover .reel__frame { transform: none; }
  .reel:has(.reel__link:hover, .reel__link:focus-visible) .reel__link:not(:hover):not(:focus-visible) .reel__frame { transform: none; }
}

/* ==========================================================================
   < 1024px: title → media → copy → horizontal reel → CTA
   ========================================================================== */
@media (max-width: 1023.98px) {
  .chapter .reel {   /* beats base.css ul[role="list"] { padding: 0 } */
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .reel::-webkit-scrollbar { display: none; }
  .reel__item {
    flex: 0 0 41%;
    max-width: 210px;
    scroll-snap-align: start;
  }
  .reel__label { font-size: 10px; }
  .chapter__cta { margin-top: -4px; }
}

/* ==========================================================================
   ≥ 1024px
   ========================================================================== */
@media (min-width: 1024px) {
  .reel { gap: calc(24 * var(--u)); }
  .reel__item { flex: 1 1 0; }

  /* Static desktop (no JS / reduced motion): the same composition in flow. */
  html:not(.motion-d) .chapter__grid {
    grid-template-areas:
      "h h h h v v v v v v v v"
      "c c c c v v v v v v v v"
      "a a a a v v v v v v v v"
      ". . . . . r r r r r r r";
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
  }
  html:not(.motion-d) .chapter__head   { grid-area: h; }
  html:not(.motion-d) .chapter__visual { grid-area: v; width: calc(755.3 * var(--u)); justify-self: end; }
  html:not(.motion-d) .chapter__copy   { grid-area: c; margin-top: calc(32 * var(--u)); }
  html:not(.motion-d) .chapter__cta    { grid-area: a; margin-top: calc(28 * var(--u)); align-self: start; }
  html:not(.motion-d) .reel            { grid-area: r; width: calc(650 * var(--u)); justify-self: end; margin-top: calc(44 * var(--u)); }

  /* Desktop motion: the Phase 1 grid (title + frame, centred in the stage) is
     untouched; Phase 2 elements are positioned around it, out of grid flow.
     Geometry: title block = 208.56u tall (index 28u + 26u + 2 × 0.84 × 92u),
     frame block = 393.375u (cols 6–12 at 16:9) + 18u + 3px bar, which settles
     1.08× from its top-right corner after the lock (js/ai-video.js), so its
     bottom ends at 50% + 0.58 × (411.375u + 3px) = 50% + 238.6u + 1.74px.   */
  .motion-d .chapter__grid { position: relative; }
  .motion-d .chapter__copy,
  .motion-d .chapter__cta,
  .motion-d .reel { position: absolute; }

  .motion-d .chapter__copy {
    left: var(--gutter);
    top: calc(50% + 136.28 * var(--u));
    width: calc(389 * var(--u));
    min-width: 280px;
  }
  .motion-d .chapter__cta {
    left: var(--gutter);
    top: calc(50% + 164.28 * var(--u) + var(--copy-h, 140px));
  }
  .motion-d .reel {
    left: calc(var(--gutter) + 566 * var(--u));
    top: calc(50% + 282.6 * var(--u) + 1.74px);
    width: calc(650 * var(--u));
  }

  /* The reel continues below the stage by --reel-overflow. Phase 2 owns this
     value; Phase 3 (css/bridge.css) consumes it. The sequence reserves the
     space as a margin, so the pinned distance and Phase 1 progress are unchanged. */
  .motion-d {
    --reel-overflow: max(0px, calc(-50vh + 703.6 * var(--u) + 29.5px));
  }
  .motion-d .sequence {
    margin-bottom: var(--reel-overflow);
  }

  /* Pre-reveal state (held through the whole Phase 1 sequence). */
  .motion-d .chapter__copy,
  .motion-d .chapter__cta { clip-path: inset(0 100% 0 0); }
  .motion-d .reel__item { clip-path: inset(100% 0 0 0); transform: translateY(28px); }

  /* Interactive only once the sequence has locked. */
  .motion-d .chapter.is-live :is(.chapter__feature, .chapter__cta, .reel__link) { pointer-events: auto; }
}

/* Mobile motion: Phase 2 content waits for the frame to land. */
.motion-m.motion-ready .chapter__copy,
.motion-m.motion-ready .chapter__cta,
.motion-m.motion-ready .reel { clip-path: inset(0 100% 0 0); }