/* Motion complements the reading layout; content stays visible without JS. */
.header-tools {display:flex;align-items:center;gap:8px;}
.motion-toggle {border:1px solid #dce4da;background:transparent;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;color:#176b53;flex-shrink:0;}
.motion-toggle[hidden] {display:none;}
.motion-toggle .motion-pause,.motion-toggle[aria-pressed=true] .motion-play {display:none;}
.motion-toggle[aria-pressed=true] .motion-pause {display:block;}
.motion-toggle:hover {background:#eaf0df;}
.motion-toggle[aria-pressed=true] {background:#eaf0df;}
.action .arrow,.route .arrow { transition:transform 240ms cubic-bezier(.2,.7,.2,1); }
.invite-ticket { transition:box-shadow 240ms,border-color 240ms; }
.step { transition:background 220ms,color 220ms,transform 220ms; }
@media (hover:hover) and (pointer:fine) {
  .action:hover .arrow { transform:translate(3px,-3px); }
  .route:hover .arrow { transform:translate(3px,-2px) rotate(-8deg); }
  .invite-ticket:hover { border-color:#bfceb2;box-shadow:0 8px 24px #2847250c; }
  .step:hover { transform:translateY(-2px); }
}
.action:active,.copy:active,.step:active { transform:translateY(1px) scale(.98); }
@media (prefers-reduced-motion:reduce) {
  html:not([data-motion=full]) { scroll-behavior:auto; }
}
html[data-motion=off] {scroll-behavior:auto;}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after {animation:none!important;transition:none!important;}
html[data-motion=off] :is(.action:hover,.action:hover .arrow,.route:hover .arrow,.copy:hover,.step:hover,.action:active,.copy:active,.step:active) {transform:none;}
html[data-motion=off] .hero-visual:hover .transfer {transform:rotate(-3deg);}
html[data-motion=full] :is(.action,.copy,.step,.route,.invite-ticket,.arrow,.transfer) {transition:transform 240ms cubic-bezier(.2,.7,.2,1),background 220ms,color 220ms,box-shadow 240ms!important;}