/* CHTAE capability page motion, batch 2 (2026-10-24) — see capability-motion-20261024.js. */
@media (prefers-reduced-motion: no-preference) {
  /* ---------- chapter entrance ---------- */
  .cap-atlas-chapter.dm-wait .cap-atlas-stage-media {
    transition: clip-path 1250ms cubic-bezier(0.65, 0, 0.35, 1), opacity 700ms ease;
  }
  .cap-atlas-chapter.dm-wait .cap-atlas-stage-media img {
    transition: filter 1500ms ease 150ms;
  }
  .cap-atlas-chapter.dm-wait:not(.dm-in) .cap-atlas-stage-media img { filter: saturate(0.55) brightness(1.06); }

  @media (min-width: 768px) {
    /* the picture opens from a framed view to the full stage */
    .cap-atlas-chapter.dm-wait:not(.dm-in) .cap-atlas-stage-media { clip-path: inset(7% 9% round 28px); opacity: 0.35; }
    .cap-atlas-chapter.dm-wait.dm-in .cap-atlas-stage-media { clip-path: inset(0 round 0); opacity: 1; }
  }
  @media (max-width: 767px) {
    /* the picture is revealed from the bottom up */
    .cap-atlas-chapter.dm-wait:not(.dm-in) .cap-atlas-stage-media { clip-path: inset(100% 0 0 0); }
    .cap-atlas-chapter.dm-wait.dm-in .cap-atlas-stage-media { clip-path: inset(0 0 0 0); }
    /* phones have no title animation of their own: the chapter copy rises in after the picture */
    .cap-atlas-chapter.dm-wait .cap-atlas-chapter-copy-system > :is(h2, p, ul, span) {
      transition: opacity 760ms ease, translate 980ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .cap-atlas-chapter.dm-wait .cap-atlas-chapter-copy-system > h2 { transition-delay: 160ms; }
    .cap-atlas-chapter.dm-wait .cap-atlas-chapter-copy-system > :is(p, ul) { transition-delay: 320ms; }
    .cap-atlas-chapter.dm-wait:not(.dm-in) .cap-atlas-chapter-copy-system > :is(h2, p, ul, span) { opacity: 0; translate: 0 22px; }
  }

  /* ---------- reading progress on the 01-07 chapter bar ---------- */
  .cap-atlas-index.dm-progress::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 2;
    height: 2px;
    background: linear-gradient(90deg, #b02a35, #e05a5f);
    transform: scaleX(var(--dm-p, 0));
    transform-origin: left center;
    pointer-events: none;
  }

  /* ---------- desktop: soft light under the mouse ---------- */
  .dm-spot {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(380px circle at var(--dm-x, 50%) var(--dm-y, 50%), rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 62%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 420ms ease;
  }
  .dm-spot.is-on { opacity: 1; }

  /* ---------- desktop: the part being presented ---------- */
  html.chtae-motion .cap-refined .cap-atlas-callout.is-guide-active,
  html.chtae-motion .cap-refined .cap-atlas-exterior-focus.is-guide-active,
  html.chtae-motion .cap-refined .cap-ee-callout.is-guide-active { animation: dm-ring 1700ms ease-out; }
  @keyframes dm-ring {
    0% { box-shadow: 0 0 0 0 rgba(176, 42, 53, 0.32), 0 16px 36px rgba(24, 31, 33, 0.14); }
    100% { box-shadow: 0 0 0 12px rgba(176, 42, 53, 0), 0 16px 36px rgba(24, 31, 33, 0.14); }
  }
  html.chtae-motion .cap-refined .is-guide-active .cap-atlas-callout-number,
  html.chtae-motion .cap-refined .is-guide-active .cap-atlas-exterior-focus-index { color: #b02a35; transition: color 300ms ease; }
  /* a quiet hint that the tour is running: the other parts step back a little */
  html.chtae-motion .dm-touring .cap-atlas-callout:not(.is-guide-active),
  html.chtae-motion .dm-touring .cap-atlas-exterior-focus:not(.is-guide-active) { opacity: 0.72; transition: opacity 400ms ease; }

  /* ---------- desktop: beacon on the car ---------- */
  .dm-beacon {
    position: absolute;
    z-index: 7;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms ease, left 560ms cubic-bezier(0.22, 1, 0.36, 1), top 560ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .dm-beacon.is-on { opacity: 1; }
  .dm-beacon-core {
    position: absolute;
    left: -8px;
    top: -8px;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #d23a44;
    box-shadow: 0 0 0 4px rgba(210, 58, 68, 0.24), 0 0 22px 6px rgba(210, 58, 68, 0.5);
  }
  .dm-beacon.is-on .dm-beacon-core { animation: dm-pop 640ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .dm-beacon-ring {
    position: absolute;
    left: -30px;
    top: -30px;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(210, 58, 68, 0.7);
    border-radius: 50%;
    opacity: 0;
  }
  .dm-beacon.is-on .dm-beacon-ring { animation: dm-ripple 2000ms cubic-bezier(0.2, 0.6, 0.35, 1) infinite; }
  .dm-beacon.is-on .dm-beacon-ring--late { animation-delay: 1000ms; }
  @keyframes dm-ripple { 0% { opacity: 0.9; transform: scale(0.25); } 70% { opacity: 0.12; } 100% { opacity: 0; transform: scale(1.6); } }
  @keyframes dm-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
}
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .dm-beacon, .dm-spot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-atlas-index.dm-progress::after { display: none; }
}