/* Separate runtime composition. Gate 1 source HTML/CSS and artwork stay locked. */
html { scroll-behavior: auto; }
#motion-experience { margin: 0; }
.motion-light { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 74% 27%, #fff5ce, transparent 68%); }
#motion-experience .current { color: inherit; text-decoration: none; }
#motion-experience .fork-question { position: absolute; z-index: 2; top: 84px; width: 100%; text-align: center; font: normal 43px/1.2 var(--serif); letter-spacing: -.025em; }
#motion-experience .current h3 { font: normal 70px/1.06 var(--serif); letter-spacing: -.045em; margin: 20px 0 0; }
#motion-experience .current:focus-visible { outline: 3px solid #fff9df; outline-offset: -9px; }
#fork:focus { outline: none; }
.skip-to-fork { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 14px 20px; color: #153446; background: #faf8f2; transform: translateY(-160%); }
.skip-to-fork:focus { transform: none; outline: 2px solid #153446; outline-offset: 2px; }
#motion-toggle { position: absolute; z-index: 10; bottom: 16px; right: 20px; min-height: 44px; min-width: 110px; padding: 10px 14px; border: 1px solid rgba(250,248,242,.38); border-radius: 0; color: #faf8f2; background: rgba(19,40,33,.92); font: 12px/1.4 var(--sans); cursor: pointer; }
#motion-toggle[hidden] { display: none; }
#motion-toggle:focus-visible { outline: 2px solid #fff9df; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-motion="running"] .current-water:hover .landscape img { filter: saturate(.65) brightness(1.025); }
  [data-motion="running"] .current-craft:hover .landscape img { filter: brightness(1.025); }
}
@media (max-width: 650px) {
  #motion-experience .fork-question { top: 40px; font-size: 30px; padding: 0 36px; line-height: 1.13; }
  #motion-experience .current h3 { font-size: 46px; margin-top: 13px; }
  #motion-toggle { right: 16px; }
}
/* Enforce the same complete still even if preference changes between JS events. */
@media (prefers-reduced-motion: reduce) {
  #entry .world { transform: none !important; }
  #entry .signature { opacity: 1 !important; }
  #entry .motion-light { opacity: 0 !important; }
}
/* Longer copy at enlarged text sizes remains readable; native scroll is unrestricted. */
@media (max-width: 360px) {
  #motion-experience .entry .signature { width: 245px; }
  #motion-experience .entry .tagline { font-size: 18px; }
  #motion-experience .fork-question { font-size: 27px; }
  #motion-experience .current h3 { font-size: 40px; }
}