/* Motion is opt-in through enhancement initialization, never a content gate. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.hero-bottom{position:relative}
.motion-ribbon{position:absolute;inset:0 0 auto;height:4px;pointer-events:none;transform-origin:left;background:linear-gradient(90deg,oklch(78% .16 172) 0%,oklch(70% .17 230) 52%,oklch(61% .21 301) 100%)}
.motion-control{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:16px}
.motion-toggle{flex:none;min-height:44px;border:1px solid var(--line);border-radius:3px;background:var(--soft);padding:9px 14px;font-size:13px;font-weight:700;color:var(--ink)}
.motion-toggle[aria-pressed=true]{border-color:var(--deep-teal);color:var(--deep-teal)}
.motion-toggle:disabled{cursor:default}
.motion-control>span{font-size:11px;line-height:1.6;color:var(--muted);max-width:28ch}
html[data-motion=off]{scroll-behavior:auto}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{transition:none!important;animation:none!important}
html[data-motion=on] .button,
html[data-motion=on] .icon-button,
html[data-motion=on] .motion-toggle,
html[data-motion=on] .tabs button,
html[data-motion=on] .zoom-label{transition:transform 220ms var(--motion-ease),opacity 220ms var(--motion-ease)}
html[data-motion=on] .button>span,
html[data-motion=on] .hero-bottom a>span{display:inline-block;transition:transform 240ms var(--motion-ease)}
html[data-motion=on] .site-header nav>a{position:relative}
html[data-motion=on] .site-header nav>a::after{content:"";position:absolute;inset:auto 0 5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 240ms var(--motion-ease)}
html[data-motion=on] .site-header nav>a:focus-visible::after{transform:scaleX(1)}
html[data-motion=on] .button:active,
html[data-motion=on] .icon-button:active,
html[data-motion=on] .motion-toggle:active{transform:translateY(1px) scale(.985)}
@media(hover:hover) and (pointer:fine){
  html[data-motion=on] .button:hover{transform:translateY(-2px)}
  html[data-motion=on] .button:hover>span{transform:translateX(4px)}
  html[data-motion=on] .hero-bottom a:hover>span{transform:translateY(4px)}
  html[data-motion=on] .image-button:hover .zoom-label{transform:translateY(-3px)}
  html[data-motion=on] .site-header nav>a:hover::after{transform:scaleX(1)}
}
@media(max-width:370px){.motion-control{align-items:flex-start;gap:12px}.motion-control>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  html[data-motion] *,html[data-motion] *::before,html[data-motion] *::after{transition:none!important;animation:none!important}
}
@media print{.motion-control,.motion-ribbon{display:none!important}}