/* ==========================================================================
   Hero → AI Video sequence (Phase 1)
   Base rules = static layout (no JS, reduced motion): hero, then the chapter
   opening in normal flow. .motion-d / .motion-m are set by the inline head
   script and js/hero-motion.js; all animated values are written inline by JS.
   ========================================================================== */

/* ---- Chapter opening: 01 — AI VIDEO ---- */
.chapter {
  position: relative;
  padding-block: 72px 96px;
}

.chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.chapter__index {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--mas-red);
  font-size: 26px;
  font-weight: 300;
  font-stretch: 100%;
  line-height: 1;
}
.chapter__dash {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--mas-red);
  transform-origin: left center;
}

.chapter__title {
  margin-top: 22px;
  color: var(--ink);
  font-size: clamp(44px, 15.2vw, 96px);
  font-weight: 900;
  font-stretch: var(--stretch-display);
  letter-spacing: -0.055em;
  line-height: 0.84;
  text-transform: uppercase;
}
.chapter__line {
  display: block;
  overflow: hidden;
  padding-block: 0.02em;
  margin-block: -0.02em;
}
.chapter__word { display: inline-block; }
.chapter__word--signal { color: var(--mas-red); }

.chapter__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111214;
}
.chapter__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play affordance: thin white ring + triangle (decorative) */
.chapter__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: 1.5px solid rgb(255 255 255 / 0.9);
  border-radius: 50%;
}
.chapter__play::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 21px;
  border-style: solid;
  border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent rgb(255 255 255 / 0.95);
}

.chapter__bar {
  display: block;
  width: 32%;
  height: 3px;
  margin-top: 16px;
  background: var(--mas-red);
}

@media (min-width: 1024px) {
  .chapter { padding-block: calc(200 * var(--u)) calc(120 * var(--u)); }

  .chapter__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: calc(24 * var(--u));
    align-items: center;
  }
  .chapter__head   { grid-column: 1 / span 5; }
  .chapter__visual { grid-column: 6 / -1; }

  .chapter__index { font-size: calc(28 * var(--u)); }
  .chapter__title {
    margin-top: calc(26 * var(--u));
    font-size: calc(92 * var(--u));
  }
  .chapter__play {
    width: calc(76 * var(--u));
    height: calc(76 * var(--u));
    margin: calc(-38 * var(--u)) 0 0 calc(-38 * var(--u));
  }
  .chapter__play::after {
    left: calc(31 * var(--u));
    top: calc(25 * var(--u));
    border-width: calc(13 * var(--u)) 0 calc(13 * var(--u)) calc(20 * var(--u));
  }
  .chapter__bar { margin-top: calc(18 * var(--u)); }
}

/* ==========================================================================
   Desktop motion: pinned stage
   ========================================================================== */
.motion-d {
  /* Scroll distance of the pinned choreography (tuned at 1440×900 / 1280×800). */
  --seq-distance: 130vh;
}

.motion-d .sequence {
  height: calc(100vh + var(--seq-distance));
}

.motion-d .sequence__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Clip horizontally only: Phase 2's reel continues below the stage. While
     pinned, anything below the stage is below the viewport. */
  overflow-x: clip;
  overflow-y: visible;
}

/* Hero copy sits above the media so MOTION. can drive over the frame. */
.motion-d .hero__copy { z-index: 8; }
.motion-d .hero__copy::before {
  transform: scaleY(var(--rule, 1));
  transform-origin: top center;
}

/* The chapter overlays the stage; its media box is the geometry target the
   lead fragment animates into, so it stays laid out but invisible. */
.motion-d .chapter {
  position: absolute;
  inset: 0;
  z-index: 9;
  padding: 0;
  pointer-events: none;
}
.motion-d .chapter__grid { height: 100%; }
.motion-d .chapter__media,
.motion-d .chapter__bar { visibility: hidden; }
.motion-d .chapter__media { background: none; }
.motion-d .chapter__media img { display: none; }
.motion-d .chapter__play { visibility: visible; }

/* Pre-JS initial state of the handoff (JS takes over inline). */
.motion-d .chapter__word { transform: translateY(105%); }
.motion-d .chapter__num  { clip-path: inset(0 100% 0 0); }
.motion-d .chapter__dash { transform: scaleX(0); }
.motion-d .chapter__play { opacity: 0; }

/* Subject's right-edge fade is driven by --fade-a / --fade-b so the subject can
   resolve to its core as the fragments leave (defaults = Phase 0 values). */
.motion-d .hm--subject .hm__media {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 var(--fade-a, 78%), transparent var(--fade-b, 100%)),
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 84%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 var(--fade-a, 78%), transparent var(--fade-b, 100%)),
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 84%, transparent 100%);
}

/* Lead fragment: frame outline and shadow fade as it becomes the video. */
.motion-d [data-lead],
.motion-m.motion-ready [data-lead] {
  outline-color: rgb(236 238 240 / calc(0.95 * var(--edge, 1)));
  box-shadow: 0 16px 28px -16px rgb(8 8 8 / calc(0.5 * var(--edge, 1)));
}

/* ==========================================================================
   Mobile motion: no pinning; light scroll-linked transforms only
   ========================================================================== */
/* Pre-states apply only once the script is running (the chapter is below the
   fold on mobile), so a failed script never hides content. */
.motion-m.motion-ready .chapter__word  { transform: translateY(105%); }
.motion-m.motion-ready .chapter__num   { clip-path: inset(0 100% 0 0); }
.motion-m.motion-ready .chapter__dash  { transform: scaleX(0); }
.motion-m.motion-ready .chapter__bar   { transform: scaleX(0); transform-origin: left center; }

/* The hero's lead fragment travels down and becomes the chapter media, so the
   chapter's own media box is only the (invisible) landing target. The hero
   media layer sits above the chapter while it travels; the handoff is tighter. */
.motion-m.motion-ready .hero__media { z-index: 2; }
/* Hand-off gap: the chapter starts ~30% closer to the hero media tail. The
   hero copy above it has been wiped by then; the chapter's own spacing is
   unchanged, so the locked state stays clean. */
.motion-m.motion-ready .chapter { padding-top: 24px; margin-top: -76px; }
/* Post-Phase-6 hotfix: the pulled-up chapter (a later positioned box) covered the
   hero's scroll cue for hit-testing. Lift only the cue above it; no layout change. */
.motion-m.motion-ready .scroll-cue { position: relative; z-index: 1; }
.motion-m.motion-ready .chapter__media { visibility: hidden; background: none; }
.motion-m.motion-ready .chapter__media img { display: none; }
.motion-m.motion-ready .chapter__play { visibility: visible; opacity: 0; }