.reading-progress { position: fixed; z-index: 150; inset: 0 0 auto; height: 3px; background: var(--gold-bright); transform: scaleX(var(--reading-progress, 0)); transform-origin: left; pointer-events: none; }
.hero-visual button.motion-toggle { align-self: flex-end; min-height: 2.25rem; margin-top: .75rem; padding: .35rem .65rem; gap: .5rem; border: 1px solid var(--line-dark); background: transparent; color: #e3e8ec; font-size: .68rem; font-weight: 600; }
.hero-visual button.motion-toggle:hover { background: var(--navy-700); color: white; }
.hero-visual button.motion-toggle:disabled { cursor: default; color: #b8c3ce; }

@media (prefers-reduced-motion: no-preference) {
  :root[data-motion="on"] { scroll-behavior: smooth; }
  :root[data-motion="on"] :is(.primary-link, .secondary-link, button, .visual-guide, .card-image-link img, .guide-action, .change-row, .change-row > a span, .reading-list a, .video-play, .deckcheck label) { transition: transform 420ms cubic-bezier(.2,.55,.3,1), box-shadow 420ms ease, background-color 220ms ease, border-color 220ms ease, color 220ms ease; }
  :root[data-motion="on"] .hero-card > .card-image-link { animation: card-drift 12s ease-in-out infinite; }
  :root[data-motion="on"] .hero-card > .card-image-link:focus-visible { animation-play-state: paused; }
  :root[data-motion="on"] .deckcheck label:has(input:checked) { background: var(--paper-deep); }
  :root[data-motion="on"] output[data-pass] { animation: result-arrive 450ms ease-out; }
  :root[data-motion="on"] .primary-link:active,
  :root[data-motion="on"] button:active { transform: translateY(1px) scale(.985); transition-duration: 90ms; }

  @media (hover: hover) and (pointer: fine) {
    :root[data-motion="on"] .visual-guide:hover { transform: translateY(-3px); border-color: #a99c83; box-shadow: 0 12px 26px rgb(20 34 51 / 9%); }
    :root[data-motion="on"] .card-image-link:hover img { transform: perspective(800px) rotateY(-4deg) rotateZ(-.5deg) scale(1.015); box-shadow: 10px 16px 30px rgb(0 0 0 / 25%); }
    :root[data-motion="on"] .primary-link:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgb(0 0 0 / 16%); }
    :root[data-motion="on"] .guide-action:hover { transform: translateX(2px); }
    :root[data-motion="on"] .change-row:hover { background: var(--paper-raised); }
    :root[data-motion="on"] .change-row:hover > a span { transform: translateX(2px); }
    :root[data-motion="on"] .reading-list a:hover { transform: translateX(2px); }
    :root[data-motion="on"] .video-launch:hover .video-play { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 6px rgb(226 184 102 / 15%); }
  }
  @keyframes card-drift { 0%, 100% { transform: translateY(0) rotate(-.25deg); } 50% { transform: translateY(-5px) rotate(.25deg); } }
  @keyframes result-arrive { from { opacity: .45; transform: translateY(5px); } to { opacity: 1; transform: none; } }
}

@media print { .reading-progress, .motion-toggle { display: none; } }