/* Shared by every page of both versions. Content stays visible without JS. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: page-out .25s ease both; }
  ::view-transition-new(root) { animation: page-in .5s cubic-bezier(.22,.7,.2,1) both; }
  @keyframes page-out { to { opacity:0; transform:translateY(-8px); } }
  @keyframes page-in { from { opacity:0; transform:translateY(18px); } }
}
.motion-progress { position:fixed; z-index:90; inset:0 0 auto; height:2px; background:var(--wc-blue,#226661); transform:scaleX(var(--read-progress,0)); transform-origin:left; pointer-events:none; }
.motion-toggle { position:fixed; z-index:80; right:18px; bottom:16px; display:flex; align-items:center; gap:8px; min-height:40px; padding:9px 13px; border:1px solid #80978d; border-radius:30px; color:#eeede5; background:#203e39; font:10px/1.3 ui-monospace,monospace; letter-spacing:.025em; box-shadow:0 5px 18px #203e3922; }
.motion-toggle::before { content:""; width:5px; height:5px; border-radius:50%; background:#d1ed9c; }
.motion-toggle[aria-pressed="true"]::before { background:#b2bfb8; }
.motion-toggle:focus-visible { outline:3px solid #82a981; outline-offset:4px; }
.motion-card { transition:box-shadow .4s,translate .4s; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .motion-card:hover { translate:0 -5px; box-shadow:0 20px 30px -25px #203e3970; }
}
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation:none !important; transition:none !important; }
.motion-paused { scroll-behavior:auto; }
@media (prefers-reduced-motion:reduce) {
  ::view-transition-group(*), ::view-transition-new(*), ::view-transition-old(*) { animation:none !important; }
  .motion-card:hover { translate:none; }
}