/* Each diagram tells its story once, then holds the same state as the static SVG. */
@media (prefers-reduced-motion: no-preference) {
  .product-card.is-playing { --story-duration: 2.4s; }

  .is-playing .vault-fill {
    transform-box: fill-box;
    transform-origin: left center;
    animation: vault-type var(--story-duration) steps(12, end) both;
  }
  .is-playing .vault-caret {
    animation: vault-caret-travel var(--story-duration) steps(12, end) both,
      vault-caret-fade var(--story-duration) linear both;
  }
  @keyframes vault-type {
    0%, 10% { transform: scaleX(0); }
    73%, 100% { transform: scaleX(1); }
  }
  @keyframes vault-caret-travel {
    0%, 10% { transform: translateX(0); }
    73%, 100% { transform: translateX(156px); }
  }
  @keyframes vault-caret-fade {
    0%, 80% { opacity: 1; }
    90%, 100% { opacity: 0; }
  }

  /* The cursor stays on the lower-right handle as the selected artwork shrinks and returns. */
  .is-playing .strata-picture {
    transform-origin: 173px 87px;
    animation: strata-resize var(--story-duration) ease-in-out both;
  }
  .is-playing .strata-cursor { animation: strata-drag var(--story-duration) ease-in-out both; }
  @keyframes strata-resize {
    0%, 12%, 88%, 100% { transform: scale(1); }
    42%, 58% { transform: scale(.64); }
  }
  @keyframes strata-drag {
    0%, 12%, 88%, 100% { transform: translate(0); }
    42%, 58% { transform: translate(-36px, -23px); }
  }

  .is-playing .desk-ticket { animation: desk-arrival var(--story-duration) ease-out both; }
  .is-playing .desk-route {
    stroke-dasharray: 1;
    animation: desk-draw var(--story-duration) linear both;
  }
  .is-playing .desk-arrow { animation: desk-deliver var(--story-duration) linear both; }
  .is-playing .desk-owner {
    transform-box: fill-box;
    transform-origin: center;
    animation: desk-received var(--story-duration) ease-out both;
  }
  @keyframes desk-arrival {
    0%, 8% { opacity: 0; transform: translate(-20px, 8px); }
    30%, 100% { opacity: 1; transform: translate(0); }
  }
  @keyframes desk-draw {
    0%, 34% { stroke-dashoffset: 1; }
    76%, 100% { stroke-dashoffset: 0; }
  }
  /* Follow the two rounded elbows of the route from the ticket to its owner. */
  @keyframes desk-deliver {
    0%, 34% { opacity: 0; transform: translate(230px, 88px); }
    38% { opacity: 1; transform: translate(237px, 88px); }
    43% { transform: translate(246px, 88px) rotate(8deg); }
    51% { transform: translate(255px, 95px) rotate(62deg); }
    59% { transform: translate(257px, 110px) rotate(90deg); }
    65% { transform: translate(261px, 121px) rotate(35deg); }
    69% { transform: translate(270px, 124px); }
    76%, 100% { opacity: 1; transform: translate(284px, 124px); }
  }
  @keyframes desk-received {
    0%, 74%, 100% { transform: scale(1); }
    84% { transform: scale(1.16); }
  }

  .is-playing .pilot-in { animation: pilot-request var(--story-duration) ease-in-out both; }
  .is-playing .pilot-gate { animation: pilot-gate var(--story-duration) linear both; }
  .is-playing .pilot-pause { animation: pilot-pause var(--story-duration) linear both; }
  .is-playing .pilot-tick, .is-playing .pilot-out { stroke-dasharray: 1; }
  .is-playing .pilot-tick { animation: pilot-approval var(--story-duration) ease-out both; }
  .is-playing .pilot-out { animation: pilot-send var(--story-duration) ease-out both; }
  .is-playing .pilot-update { animation: pilot-updated var(--story-duration) ease-out both; }
  @keyframes pilot-request {
    0% { opacity: 0; transform: translateX(0); }
    8% { opacity: 1; transform: translateX(0); }
    30%, 53% { opacity: 1; transform: translateX(41px); }
    62%, 100% { opacity: 0; transform: translateX(47px); }
  }
  @keyframes pilot-gate {
    0%, 53% { fill: #f0be72; stroke: #a97742; }
    62%, 100% { fill: #96ddb5; stroke: #577b61; }
  }
  @keyframes pilot-pause {
    0%, 53% { opacity: 1; }
    58%, 100% { opacity: 0; }
  }
  @keyframes pilot-approval {
    0%, 58% { opacity: 0; stroke-dashoffset: 1; }
    59% { opacity: 1; stroke-dashoffset: 1; }
    69%, 100% { opacity: 1; stroke-dashoffset: 0; }
  }
  @keyframes pilot-send {
    0%, 70% { opacity: 0; stroke-dashoffset: 1; }
    71% { opacity: 1; stroke-dashoffset: 1; }
    88%, 100% { opacity: 1; stroke-dashoffset: 0; }
  }
  @keyframes pilot-updated {
    0%, 86% { fill: #263d5d; stroke: #8aa2be; }
    97%, 100% { fill: #24544e; stroke: #87e0b8; }
  }
}