/* Calm, viewport-aware motion with a complete still for reduced motion. */
.ch-motion, .ip-motion-media { position: relative; overflow: hidden; }
.ch-motion-still, .ch-motion-clip { display: block; width: 100%; height: auto; }
.ch-motion-still img { display: block; width: 100%; height: auto; }
.ch-motion-clip { position: absolute; inset: 0; opacity: 0; }
.ch-motion-clip.is-playing { opacity: 1; }
.ch-motion-wave { width: 100%; margin: auto 0; }
.ch-motion-wave .ch-motion-still, .ch-motion-wave .ch-motion-clip { width: 100%; }
.ch-motion-story { background: var(--ch-ivory-2); }
.ch-motion-story-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.ch-motion-story h2 { max-width: 14ch; font-family: var(--ch-display); font-size: clamp(2.1rem, 3.4vw, 3.6rem); font-weight: 600; letter-spacing: -.014em; line-height: 1.08; color: var(--ch-ink); }
.ch-motion-story p { max-width: 46ch; margin: 20px 0; color: var(--ch-body); }
.ch-motion-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ch-motion-type, .ch-motion-prompt, .ip-motion-media { border-radius: 12px; background: #faf6ec; }
.ch-motion-prompt { aspect-ratio: 8 / 5; }
.ch-prompt-still { position: absolute; inset: 17% 6.25%; display: flex; flex-direction: column; padding: 3.75%; border: 1px solid rgba(32,54,74,.12); border-radius: 12px; background: #fffdf8; box-shadow: 0 20px 30px -26px rgba(32,54,74,.55); }
.ch-prompt-field { display: flex; align-items: center; flex: 0 0 24%; padding: 0 3%; border: 1px solid rgba(32,54,74,.1); border-radius: 8px; background: #faf6ec; color: #33475f; font-size: clamp(.65rem, 1.5vw, 1rem); }
.ch-prompt-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); flex: 1; gap: 7px; margin: 5% auto 0; width: 96%; }
.ch-prompt-options span { display: grid; place-items: center; min-height: clamp(20px, 3.5vw, 42px); border: 1px solid rgba(32,54,74,.12); border-radius: 8px; color: #20364a; font-size: clamp(.62rem, 1.2vw, .9rem); line-height: 1; }
.ip-motion-media { width: min(100%, 560px); margin: 0 auto 2.5rem; }
@media (max-width: 720px) {
  .ch-motion-story-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ch-motion-duo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-motion-clip { display: none !important; }
}