/* ==========================================================================
   CREATE → ATTENTION → REACH → 02 DIGITAL MARKETING (Phase 3)
   Base rules = static (no JS / reduced motion): an editorial CREATE / REACH
   bridge, then the Digital Marketing section in normal flow.
   .motion-d: short sticky stage, everything scrubbed by js/bridge.js.
   .motion-m: normal flow, few scroll-linked transforms.
   ========================================================================== */

.bridge { position: relative; }
.bridge__stage { position: relative; }

/* ---- Kinetic words (shared type system with the hero / chapter titles) ---- */
.bridge__words {
  margin: 0 auto;
  max-width: var(--ref-width);
  padding: 40px var(--gutter) 0;
  color: var(--ink);
  font-size: clamp(36px, 12.8vw, 96px);
  font-weight: 900;
  font-stretch: var(--stretch-display);
  letter-spacing: -0.055em;
  line-height: 0.84;
  text-transform: uppercase;
}
.bridge__line {
  display: block;
  overflow: hidden;
  padding-block: 0.02em;
  margin-block: -0.02em;
}
.bridge__word { display: inline-block; white-space: nowrap; }
.bridge__word--signal { color: var(--mas-red); }

/* Static bridge reads CREATE / REACH; ATTENTION is a kinetic beat only. */
html:not(.motion-d):not(.motion-m) .bridge__line--attention { display: none; }

.bridge__media { display: none; }
.route,
.place,
.bridge__src { display: block; }
.place,
.bridge__src {
  position: absolute;
  overflow: hidden;
  background: #111214;
}
.place img,
.bridge__src img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.route {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  background: var(--mas-red);
  transform-origin: 0 50%;
}

/* ---- 02 — DIGITAL MARKETING ---- */
.dm {
  position: relative;
  padding-block: 64px 96px;
}
.dm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.dm__index {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--mas-red);
  font-size: 26px;
  font-weight: 300;
  font-stretch: 100%;
  line-height: 1;
}
.dm__dash {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--mas-red);
  transform-origin: left center;
}
.dm__title {
  margin-top: 22px;
  color: var(--ink);
  font-size: clamp(40px, 12.4vw, 80px);
  font-weight: 900;
  font-stretch: var(--stretch-display);
  letter-spacing: -0.055em;
  line-height: 0.84;
  text-transform: uppercase;
}
.dm__line {
  display: block;
  overflow: hidden;
  padding-block: 0.02em;
  margin-block: -0.02em;
}
.dm__word { display: inline-block; }
.dm__word--signal { color: var(--mas-red); }
.dm__intro {
  margin-top: 20px;
  max-width: 24em;
  color: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
}

.dm__media {
  position: relative;
  width: min(62%, 280px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #111214;
}
.dm__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm__services { margin: 0; }
.dm__service {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 15px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  font-stretch: var(--stretch-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dm__service:last-child { border-bottom: 1px solid var(--line); }
.dm__service-index {
  min-width: 2ch;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

@media (min-width: 1024px) {
  .bridge__words {
    padding-top: calc(120 * var(--u));
    font-size: calc(132 * var(--u));
  }
  .dm { padding-block: calc(140 * var(--u)) calc(140 * var(--u)); }
  .dm__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: calc(24 * var(--u));
    align-items: center;
  }
  .dm__head     { grid-column: 1 / span 6; }
  .dm__media    { grid-column: 7 / span 3; width: 100%; }
  .dm__services { grid-column: 10 / span 3; margin-left: calc(40 * var(--u)); }
  .dm__index { font-size: calc(28 * var(--u)); }
  .dm__title {
    margin-top: calc(26 * var(--u));
    font-size: calc(76 * var(--u));
  }
  .dm__intro { margin-top: calc(28 * var(--u)); max-width: calc(380 * var(--u)); min-width: 280px; }
}

/* ==========================================================================
   Desktop motion: short pinned stage
   ========================================================================== */
.motion-d {
  --bridge-distance: 95vh;   /* shorter than the hero's 130vh */
  /* Pin starts 0.55 viewport heights after the Phase 1 lock: the AI Video
     reveal (0.32vh) plus a breathing pause. The bridge sits after the
     sequence and its reel spacer (--reel-overflow, owned by css/ai-video.css),
     so pull it back by 100vh - 55vh + spacer. */
  --bridge-pull: calc(-45vh - var(--reel-overflow, 0px));
}
.motion-d .bridge {
  height: calc(100vh + var(--bridge-distance));
  margin-top: var(--bridge-pull);
  pointer-events: none;   /* never blocks the AI Video section underneath */
}
.motion-d .bridge__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-x: clip;
}

.motion-d .bridge__words {
  position: absolute;
  left: calc(max(0px, (100% - var(--ref-width)) / 2) + var(--gutter));
  top: calc(36% + 216 * var(--u));
  margin: 0;
  padding: 0;
  max-width: none;
  z-index: 3;
}
.motion-d .bridge__line { position: absolute; left: 0; top: 0; }
/* ATTENTION is a bridge beat, not the climax: 13% smaller, same baseline. */
.motion-d .bridge__line--attention { font-size: 0.87em; top: 0.125em; }
.motion-d .bridge__media { display: block; position: absolute; inset: 0; z-index: 2; }
/* Fixed raster scale: each layout box is at its largest state, so scaling is
   ≤ 1 and the rendered pixels don't depend on scroll history. */
.motion-d .place,
.motion-d .bridge__src { transform-origin: 0 0; will-change: transform; }
.motion-d .route { width: 100%; }

.motion-d .dm {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 0;
}
.motion-d .dm__grid { height: 100%; }
/* The social placement lands on this box and becomes the media. */
.motion-d .dm__media { visibility: hidden; background: none; }
.motion-d .dm__media img { display: none; }

/* Pre-JS / pre-progress state: nothing of the bridge is visible. */
.motion-d .bridge__word,
.motion-d .dm__word { transform: translateY(105%); }
.motion-d .bridge__media > * { opacity: 0; }
.motion-d .dm__num,
.motion-d .dm__intro,
.motion-d .dm__service { clip-path: inset(0 100% 0 0); }
.motion-d .dm__dash { transform: scaleX(0); }

/* Same-pixel handoff: once the bridge pins, its source replaces the film. */
.motion-d.p3-live .hero__media,
.motion-d.p3-live .chapter__play { visibility: hidden; }

/* ==========================================================================
   Mobile motion: normal flow; one creative reformats into two placements
   ========================================================================== */
@media (max-width: 1023.98px) {
  .motion-m .bridge__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .motion-m .bridge__words { display: contents; }
  .motion-m .bridge__line { padding-inline: var(--gutter); }
  .motion-m .bridge__line:first-child { margin-top: 24px; }
  /* ATTENTION and REACH share one slot (row 3): one dominant word at a time. */
  .motion-m .bridge__line--attention,
  .motion-m .bridge__line:last-child { grid-row: 3; grid-column: 1; margin-top: 28px; }
  .motion-m .bridge__line:first-child { grid-row: 1; }
  .motion-m .bridge__media { grid-row: 2; }
  .motion-m .dm { grid-row: 4; margin-top: 44px; }
  .motion-m .bridge__line {
    font-size: clamp(36px, 12.8vw, 96px);
    font-weight: 900;
    font-stretch: var(--stretch-display);
    letter-spacing: -0.055em;
    line-height: 0.84;
    text-transform: uppercase;
    color: var(--ink);
  }

  .motion-m .bridge__media {
    display: block;
    position: relative;
    margin: 20px var(--gutter) 0;
    aspect-ratio: 1 / 0.8;
  }
  .motion-m .bridge__src,
  .motion-m .place[data-place="feed"],
  .motion-m .route { display: none; }
  .motion-m .place { inset: 0; }
}

/* Pre-states once the script runs (all below the fold). */
.motion-m.motion-ready .bridge__word,
.motion-m.motion-ready .dm__word { transform: translateY(105%); }
.motion-m.motion-ready .dm__num,
.motion-m.motion-ready .dm__intro,
.motion-m.motion-ready .dm__service { clip-path: inset(0 100% 0 0); }
.motion-m.motion-ready .dm__dash { transform: scaleX(0); }