/* Motion is progressive enhancement: all content remains visible without JS. */
@keyframes vortex-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes vortex-landscape{from{transform:scale(1.1) translateX(1%)}to{transform:scale(1.02) translateX(0)}}
@keyframes vortex-spin{from{transform:rotate(-30deg)}to{transform:rotate(330deg)}}
@keyframes vortex-logo{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes vortex-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes vortex-dialog{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes vortex-tab{from{opacity:.35;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
  html:not(.motion-paused) .hero-image{animation:vortex-landscape 4.5s cubic-bezier(.2,.5,.3,1) both}
  html:not(.motion-paused) .hero-content>.eyebrow{animation:vortex-enter .7s .05s both}
  html:not(.motion-paused) .hero-content>h1{animation:vortex-enter .85s .15s both}
  html:not(.motion-paused) .hero-content>p{animation:vortex-enter .85s .28s both}
  html:not(.motion-paused) .hero-actions{animation:vortex-enter .85s .4s both}
  html:not(.motion-paused) .hero-note{animation:vortex-enter .85s .5s both}
  html:not(.motion-paused) .hero-caption{animation:vortex-enter .9s .65s both}
  html:not(.motion-paused) .header .brand>img{animation:vortex-logo 1.3s cubic-bezier(.16,1,.3,1) .1s both}
  html:not(.motion-paused) .brand>img{transition:transform .9s cubic-bezier(.16,1,.3,1)}
  html:not(.motion-paused) .brand:hover>img{transform:rotate(180deg)}
  html:not(.motion-paused) .reveal-pending{opacity:0;transform:translateY(28px);transition:opacity .75s var(--reveal-delay,0ms),transform .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
  html:not(.motion-paused) .reveal-pending.is-visible{opacity:1;transform:translateY(0)}
  html:not(.motion-paused) .device-art.is-visible .tablet{animation:vortex-float 3.8s .3s ease-in-out 1}
  html:not(.motion-paused) .device-art.is-visible .phone{animation:vortex-float 3.8s .6s ease-in-out 1}
  html:not(.motion-paused) .closing.is-visible .closing-vortex{animation:vortex-spin 3.5s cubic-bezier(.16,1,.3,1) both}
  html:not(.motion-paused) dialog[open]{animation:vortex-dialog .28s cubic-bezier(.2,.7,.2,1) both}
  html:not(.motion-paused) .story.category-enter{animation:vortex-tab .45s ease-out both}
  html:not(.motion-paused) .plan{transition:translate .3s ease,border-color .3s,box-shadow .3s}
  html:not(.motion-paused) .plan:hover{translate:0 -7px;border-color:#ff81476b;box-shadow:0 18px 45px #0003}
  html:not(.motion-paused) .button>span,html:not(.motion-paused) .text-link>span:last-child{transition:transform .25s}
  html:not(.motion-paused) .button:hover>span,html:not(.motion-paused) .text-link:hover>span:last-child{transform:translate(3px,-3px)}
  html:not(.motion-paused) .circle-arrow{transition:background .2s,transform .25s}
  html:not(.motion-paused) .circle-arrow:hover{transform:rotate(45deg)}
}
.motion-paused{scroll-behavior:auto}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important}
.motion-paused .reveal-pending{opacity:1;transform:none}
#motion-toggle{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
#motion-toggle::before{content:'Ⅱ';color:var(--orange);font-size:10px}
#motion-toggle[aria-pressed=false]::before{content:'▶';font-size:8px}
#motion-toggle:disabled{opacity:.6}
@media(prefers-reduced-motion:reduce){.reveal-pending{opacity:1!important;transform:none!important}}