/* Motion enhances an already complete page. No CSS hides readable content. */
.signature-ribbon { pointer-events: none; }
.signature-ribbon svg { display: block; width: 100%; }
[data-ribbon-path] { vector-effect: non-scaling-stroke; }
[data-motion-screen], [data-motion-layer] { transform-origin: 50% 55%; }
[data-ribbon-mark] { transform-origin: 50% 50%; }
@media (max-width: 1100px) { [data-ribbon-path] { stroke-width: 22px; } }
@media (max-width: 700px) { [data-ribbon-path] { stroke-width: 12px; } }

@media (prefers-reduced-motion: no-preference) {
  .store-button, .text-link, .style-option, .voice-character, .demo-switch button,
  .sound-toggle, [data-prompter-toggle], .feature-tabs button {
    transition: translate 180ms cubic-bezier(.16,1,.3,1), transform 180ms cubic-bezier(.16,1,.3,1), scale 140ms ease-out,
      color 180ms ease, background-color 180ms ease;
  }
  .store-button:active, .style-option:active, .voice-character:active,
  .demo-switch button:active, .sound-toggle:active, [data-prompter-toggle]:active,
  .feature-tabs button:active { scale: .975; }
  .faq-list summary span { transition: rotate 220ms cubic-bezier(.16,1,.3,1); }
  .faq-list details[open] summary span { rotate: 45deg; }
  .style-option img, .voice-character img {
    transition: scale 350ms cubic-bezier(.16,1,.3,1);
  }
  .main-nav a { position: relative; }
  .main-nav a::after {
    content: ''; position: absolute; inset-inline: 0; bottom: 4px; height: 3px;
    background: currentColor; transform: scaleX(0); transform-origin: left center;
    transition: transform 250ms cubic-bezier(.16,1,.3,1);
  }
  [dir="rtl"] .main-nav a::after { transform-origin: right center; }
  .main-nav a:focus-visible::after { transform: scaleX(1); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .store-button:hover, .text-link:hover { translate: 0 -2px; }
  .style-option:hover { transform: translateY(-4px); }
  .voice-character:hover { translate: 0 -4px; }
  .style-option:hover img, .voice-character:hover img { scale: 1.035; }
  .main-nav a:hover { text-decoration: none; }
  .main-nav a:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  [data-motion-screen], [data-motion-layer], [data-ribbon-mark] { will-change: auto; }
  .waveform i, .caption-track span, .record-dot, .noise-cloud i { animation: none !important; }
  html { scroll-behavior: auto; }
}