/* ZaxSocial · css/motion.css — keyframe library, platform View Transitions for routes (iOS push/pop with parallax + dim,
   Android shared-axis X + tab fade-through, desktop cross-fade; U2 router runs the WAAPI fallback), press feedback, illustration loops,
   and the reduced-motion overrides (120 ms cross-fade; no parallax, rotation, bounce, wiggle, confetti).
   Owner: U3. Docs: 02-backbone-frontend-b.md §2; 15-C §14 (N1–N3, H2, H4, F1, F4); addenda 18. */
@keyframes zs-fade-in{from{opacity:0}to{opacity:1}}
@keyframes zs-fade-out{to{opacity:0}}
@keyframes zs-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes zs-pop{0%{transform:scale(.9)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes zs-wiggle{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}
@keyframes zs-pulse-ring{0%{transform:scale(.8);opacity:.55}100%{transform:scale(1.9);opacity:0}}
@keyframes zs-typing-dots{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes zs-ring-rotate{to{transform:rotate(360deg)}}
@keyframes zs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes zs-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.92)}}
@keyframes zs-sheen{from{background-position:-160% 0}to{background-position:260% 0}}
@keyframes zs-splash-mark{from{opacity:0;transform:scale(.9);box-shadow:0 0 0 0 var(--zs-lit-6b4eff-45)}to{opacity:1;transform:none}}
@keyframes zs-splash-out{to{opacity:0;visibility:hidden}}
@keyframes zs-vt-in-right{from{transform:translateX(100%)}to{transform:none}}
@keyframes zs-vt-out-left{to{transform:translateX(-30%);filter:brightness(.9)}}
@keyframes zs-vt-in-left{from{transform:translateX(-30%);filter:brightness(.9)}to{transform:none;filter:none}}
@keyframes zs-vt-out-right{to{transform:translateX(100%)}}
@keyframes zs-axis-in-r{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes zs-axis-out-l{to{opacity:0;transform:translateX(-30px)}}
@keyframes zs-axis-in-l{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes zs-axis-out-r{to{opacity:0;transform:translateX(30px)}}
@keyframes zs-through-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* View Transitions (router sets html[data-nav] before startViewTransition; #zs-view > .zs-screen = zs-page) */
#zs-header{view-transition-name:zs-header}
#zs-tabbar{view-transition-name:zs-tabbar}
::view-transition-group(zs-page){animation-duration:var(--zs-dur-page)}
html[data-platform="ios"][data-nav="push"]::view-transition-new(zs-page){animation:zs-vt-in-right var(--zs-dur-page) var(--zs-ease-ios) both;box-shadow:-10px 0 30px var(--zs-lit-000000-18)}
html[data-platform="ios"][data-nav="push"]::view-transition-old(zs-page){animation:zs-vt-out-left var(--zs-dur-page) var(--zs-ease-ios) both}
html[data-platform="ios"][data-nav="pop"]::view-transition-old(zs-page){z-index:2;animation:zs-vt-out-right var(--zs-dur-page) var(--zs-ease-ios) both;box-shadow:-10px 0 30px var(--zs-lit-000000-18)}
html[data-platform="ios"][data-nav="pop"]::view-transition-new(zs-page){animation:zs-vt-in-left var(--zs-dur-page) var(--zs-ease-ios) both}
html[data-platform="android"][data-nav="push"]::view-transition-new(zs-page){animation:zs-axis-in-r 300ms var(--zs-ease-standard) both}
html[data-platform="android"][data-nav="push"]::view-transition-old(zs-page){animation:zs-axis-out-l 300ms var(--zs-ease-standard) both}
html[data-platform="android"][data-nav="pop"]::view-transition-new(zs-page){animation:zs-axis-in-l 300ms var(--zs-ease-standard) both}
html[data-platform="android"][data-nav="pop"]::view-transition-old(zs-page){animation:zs-axis-out-r 300ms var(--zs-ease-standard) both}
html[data-nav="tab"]::view-transition-old(zs-page){animation:zs-fade-out 90ms var(--zs-ease-accelerate) both}
html[data-nav="tab"]::view-transition-new(zs-page){animation:zs-through-in 210ms var(--zs-ease-decelerate) 90ms both}
html[data-platform="desktop"]::view-transition-old(zs-page),html[data-nav="fade"]::view-transition-old(zs-page){animation:zs-fade-out 160ms var(--zs-ease-standard) both}
html[data-platform="desktop"]::view-transition-new(zs-page),html[data-nav="fade"]::view-transition-new(zs-page){animation:zs-fade-in 160ms var(--zs-ease-standard) both}

/* Press feedback (F1): scale .97 everywhere, iOS highlight fade, Android ripple (gestures.js) */
.zs-iconbtn{transition:background-color var(--zs-dur-fast) var(--zs-ease-standard),transform var(--zs-dur-instant) var(--zs-ease-standard)}
.zs-iconbtn:active,.zs-chip:active,.zs-option:active{transform:scale(.97)}
html[data-platform="ios"] :is(a.zs-item,button.zs-item,label.zs-item,.zs-menu__item):active{background:var(--zs-overlay-press);transition:background-color 0s}
html[data-platform="ios"] :is(a.zs-item,button.zs-item,label.zs-item,.zs-menu__item){transition:background-color var(--zs-dur-slow) var(--zs-ease-standard)}
.zs-iconbtn.is-wiggle>.zi{animation:zs-wiggle var(--zs-dur-wiggle) var(--zs-ease-standard);transform-origin:50% 8%}
html.is-hidden .zs-avatar--ring.is-animated::before,html.is-hidden .zs-ill__float,html.is-hidden .zs-ill__pulse{animation-play-state:paused}
.zs-skel{animation-duration:var(--zs-dur-shimmer)}
.zs-ill__float{animation:zs-float 6s ease-in-out infinite;transform-box:fill-box}
.zs-ill__pulse{animation:zs-pulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.zs-ill__pulse--2{animation-delay:.6s}
.zs-ill__pulse--3{animation-delay:1.2s}
.zs-btn--sheen{background-size:240% 100%;animation:zs-sheen 1.2s var(--zs-ease-standard) 1}

/* Reduced motion (OS setting or in-app toggle → html[data-motion=reduce]): static UI, 120 ms fades only */
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation-duration:1ms !important;animation-iteration-count:1 !important;animation-delay:0ms !important;transition-duration:1ms !important;scroll-behavior:auto !important}
html[data-motion="reduce"] .zs-skel,html[data-motion="reduce"] .zs-avatar--ring.is-animated::before,html[data-motion="reduce"] .zs-ill__float,html[data-motion="reduce"] .zs-ill__pulse,html[data-motion="reduce"] .zs-iconbtn.is-wiggle>.zi,html[data-motion="reduce"] .zs-spinner,html[data-motion="reduce"] .zs-ptr__spin,html[data-motion="reduce"] .zs-ring.is-indeterminate>svg{animation:none !important}
html[data-motion="reduce"] .zs-spinner,html[data-motion="reduce"] .zs-ptr.is-loading .zs-ptr__spin{animation:zs-spin 1.6s linear infinite !important}
html[data-motion="reduce"] .zs-iconbtn:active,html[data-motion="reduce"] .zs-btn:active,html[data-motion="reduce"] .zs-chip:active,html[data-motion="reduce"] .zs-option:active{transform:none !important}
html[data-motion="reduce"] .zs-splash{animation:zs-splash-out 1ms 3s forwards !important}
html[data-motion="reduce"].is-ready .zs-splash{animation:none !important;display:none}
html[data-motion="reduce"]::view-transition-group(*),html[data-motion="reduce"]::view-transition-old(*),html[data-motion="reduce"]::view-transition-new(*){animation-duration:var(--zs-reduce-fade) !important;animation-delay:0ms !important;box-shadow:none !important}
html[data-motion="reduce"]::view-transition-old(zs-page){animation-name:zs-fade-out !important}
html[data-motion="reduce"]::view-transition-new(zs-page){animation-name:zs-fade-in !important}