/* Approved inline narrative: an unboxed section using MOW's existing roles. */
.mow-motion {
  --film-light: var(--canvas);
  --film-dark: #121212;
  --film-ink: var(--ink);
  --film-muted: var(--muted);
  --film-contrast-ink: #F3F3F3;
  --film-contrast-muted: #AFAFAF;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--film-light);
  color: var(--film-ink);
  padding-block: 24px;
  margin-top: 0;
  scroll-margin-top: 88px;
}
:root[data-theme="dark"] .mow-motion { --film-dark: #F7F7F7; --film-contrast-ink: #232323; --film-contrast-muted: #5C5C5C; }
.motion-dark { position: absolute; inset: 0; z-index: -1; background: var(--film-dark); clip-path: inset(var(--dark-top, 100%) var(--dark-right, 0px) 0 0); }
.motion-stage { position: relative; width: 100%; max-width: min(1360px, calc((100svh - 152px) * 16 / 9)); margin: 0 auto; aspect-ratio: 16 / 9; }
#mow-canvas { width: 100%; height: auto; display: block; position: absolute; top: 0; left: 0; }
.motion-poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 4vw, 56px); }
.motion-poster img { width: clamp(42px, 8vw, 110px); height: auto; }
.mow-motion[data-ready] .motion-poster { display: none; }
.motion-copy { position: absolute; inset: 0; text-align: center; pointer-events: none; }
.motion-stage { opacity: var(--story-opacity, 1); }
.motion-caption { position: absolute; top: var(--caption-y, 78%); left: 24px; right: 24px; transform: translateY(-50%); display: flex; justify-content: center; align-content: center; flex-wrap: wrap; column-gap: .29em; font-size: clamp(22px, 2.45vw, 36px); font-weight: 400; line-height: 1.4; letter-spacing: .015em; }
.motion-word { display: inline-block; }
.motion-ending { position: absolute; top: var(--logo-y, 68%); left: 50%; transform: translate(-50%, -50%); visibility: hidden; opacity: 0; }
.motion-ending img { width: 176px; height: auto; }
.motion-labels { position: absolute; inset: 0; pointer-events: none; }
.motion-label { position: absolute; transform: translateX(-50%); color: var(--film-muted); text-align: center; white-space: nowrap; font: 400 clamp(9px, 1.12vw, 16px)/1.5 "Inter", sans-serif; }
.motion-label.is-address { font-family: "JetBrains Mono", monospace; font-size: clamp(7px, .9vw, 13px); }
.motion-copy.on-contrast { color: var(--film-contrast-ink); }
.motion-label.on-contrast { color: var(--film-contrast-muted); }
@media (max-width: 760px) {
  .mow-motion { padding-block: 16px; }
  .motion-stage { max-width: 100%; aspect-ratio: auto; height: max(360px, calc(100vw * 9 / 16 + 100px)); }
  #mow-canvas { top: 32px; }
  .motion-ending img { width: 140px; }
}
@media (forced-colors: active) {
  .motion-dark { display: none; }
  .mow-motion, .motion-copy { background: Canvas; color: CanvasText; }
}