/* =====================================================================
   بيت جذور — motion.css (3.55). Load LAST (after map.css). Uses tokens.css durations/easings.
   Everything here is switched off by prefers-reduced-motion (bottom of file).
   ===================================================================== */

/* ---------- 1) page enter: fade + 8px rise, 180ms ---------- */
@keyframes jzEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes jzLeave{to{opacity:0}}
/* a) View Transitions (Chromium 111+, Safari 18+) — driven by JZMotion.navigate() */
::view-transition-old(root){animation:jzLeave var(--dur-1) var(--ease-in) both}
::view-transition-new(root){animation:jzEnter var(--dur-2) var(--ease-out) both}
/* chrome stays put while the page changes */
nav.tabs{view-transition-name:jz-tabs}
aside.side{view-transition-name:jz-side}
.bellfab{view-transition-name:jz-bell}
.fabnew{view-transition-name:jz-fab}
::view-transition-group(jz-tabs),::view-transition-group(jz-side),::view-transition-group(jz-bell),::view-transition-group(jz-fab){animation:none}
::view-transition-old(jz-tabs),::view-transition-old(jz-side),::view-transition-old(jz-bell),::view-transition-old(jz-fab){display:none}
::view-transition-new(jz-tabs),::view-transition-new(jz-side),::view-transition-new(jz-bell),::view-transition-new(jz-fab){animation:none}
/* b) pure-CSS fallback (no VT support, or app.js not wired yet): motion.js sets html.pg-enter for 400ms on hashchange;
      the page body that gets (re)inserted during that window plays the same keyframes. */
.pg-enter #app main,.pg-enter #app .hwmain,.pg-enter #app .home-grid,.pg-enter #app .dash{animation:jzEnter var(--dur-2) var(--ease-out) both}

/* ---------- 2) tab indicator + icon pop (only right after navigation: html.nav-in) ---------- */
@keyframes jzInd{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes jzPop{45%{transform:translateY(-2px) scale(1.1)}}
.nav-in nav.tabs a[aria-current]::before{animation:jzInd var(--dur-3) var(--ease-out) both}
.nav-in nav.tabs a[aria-current] svg,.nav-in nav.tabs a[aria-current] .jzi{animation:jzPop 280ms var(--ease-out)}
.nav-in .side-nav a[aria-current]{animation:jzFadeBg var(--dur-3) var(--ease-out)}
@keyframes jzFadeBg{from{background-color:transparent}}

/* ---------- 3) press feedback ---------- */
.btn,.iconbtn,.qa-b,.chips a,.card.thread,.hubrow,.mt-row,.kid,.langs button,.seg label,.seg3 label,.fabnew,.bellfab,nav.tabs a svg,nav.tabs a .jzi,.side-nav a{
  transition:transform var(--dur-1) var(--ease-std),background-color var(--dur-2) var(--ease-std),border-color var(--dur-2) var(--ease-std),color var(--dur-2) var(--ease-std),opacity var(--dur-2) var(--ease-std)}
.btn:active:not(:disabled):not(.off),.iconbtn:active,.qa-b:active,.chips a:active,.fabnew:active,.bellfab:active,.langs button:active,.seg label:active,.seg3 label:active{transform:scale(.96)}
.card.thread:active,.hubrow:active,.mt-row:active{transform:scale(.985);background-color:var(--surface-2)}
nav.tabs a:active svg,nav.tabs a:active .jzi{transform:scale(.86)}

/* ---------- 4) <details> open/close (progressive: Chrome 131+; others open instantly as today) ---------- */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:clip;transition:block-size var(--dur-3) var(--ease-std),content-visibility var(--dur-3) allow-discrete}
  details[open]::details-content{block-size:auto}
}
details>summary::-webkit-details-marker{transition:transform var(--dur-2) var(--ease-std)}

/* ---------- 5) skeleton loader (replaces the «لحظة…» card) ---------- */
@keyframes jzSkIn{from{opacity:0}}
@keyframes jzSkSh{to{background-position:-200% 0}}
.skel{display:flex;flex-direction:column;gap:var(--s-3);animation:jzSkIn var(--dur-2) 150ms both} /* invisible if data lands < 150ms */
.skel i{display:block;height:76px;border-radius:var(--r-lg);
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--bg) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:jzSkSh 1.2s linear infinite}
.skel i:first-child{height:120px}
.skel.line i{height:14px;border-radius:var(--r-sm)}
.skel.line i:first-child{width:60%}

/* ---------- 6) toast ---------- */
.jz-toast{position:fixed;inset-inline:var(--s-4);bottom:calc(150px + var(--safe-bottom,0px));margin-inline:auto;max-width:420px;width:max-content;
  background:var(--brand-bg);color:var(--on-brand);padding:var(--s-3) var(--s-5);border-radius:var(--r-md);box-shadow:var(--shadow-2);
  font-size:var(--fs-base);text-align:center;z-index:60;pointer-events:none;opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.jz-toast.on{opacity:1;transform:none}
.jz-toast.bad{background:var(--danger);color:var(--on-primary)}
.jz-toast.ok{background:var(--success);color:var(--on-primary)}
.toast{border-radius:var(--r-md);box-shadow:var(--shadow-2);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}

/* ---------- 7) theme switch: colors glide instead of snapping (only while switching) ---------- */
html.jz-theming *,html.jz-theming *::before,html.jz-theming *::after{transition:background-color var(--dur-3) var(--ease-std),color var(--dur-3) var(--ease-std),border-color var(--dur-3) var(--ease-std)!important}

/* ---------- 8) reduced motion: everything off ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .skel i{animation:none!important}
  .splash-logo{animation:none!important}
}