/* Axle — motion layer. One token scale (transitions.dev) for every transition in the product.
   Rules of thumb: open slower than close, rise + cross-blur on enter, quiet fade on exit,
   stagger lists by 40ms, never animate layout on live-updating data. */
:root {
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-small: 0.98;
  --scale-tiny: 0.99;
  --blur-small: 2px;
  --blur-medium: 3px;
}

/* ── page enter: staggered blurred rise (texts reveal) ── */
@keyframes t-rise { from { opacity: 0; transform: translateY(var(--distance-medium)); filter: blur(var(--blur-medium)); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes t-fade { from { opacity: 0; } to { opacity: 1; } }
.t-enter > * { animation: t-rise var(--duration-very-slow) var(--ease-smooth-out) both; animation-delay: calc(var(--i, 0) * var(--duration-stagger) * 1.6); }
.t-enter-rows > * { animation: t-rise var(--duration-slow) var(--ease-smooth-out) both; animation-delay: calc(120ms + var(--i, 0) * var(--duration-stagger)); }
.page-map.t-enter > * { animation-name: t-fade; }

/* ── modal open / close (scale 0.96 + fade, softer close) ── */
@keyframes t-scrim-in { from { opacity: 0; backdrop-filter: blur(0); } }
@keyframes t-scrim-out { to { opacity: 0; } }
@keyframes t-modal-in { from { opacity: 0; transform: scale(var(--scale-large)) translateY(var(--distance-base)); filter: blur(var(--blur-small)); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes t-modal-out { to { opacity: 0; transform: scale(var(--scale-large)); } }
.scrim { animation: t-scrim-in var(--duration-fast) var(--ease-smooth-out) both; }
.scrim .modal, .scrim .palette { animation: t-modal-in var(--duration-fast) var(--ease-smooth-out) both; }
.scrim.is-closing { animation: t-scrim-out var(--duration-quick) var(--ease-smooth-out) forwards; pointer-events: none; }
.scrim.is-closing .modal, .scrim.is-closing .palette { animation: t-modal-out var(--duration-quick) var(--ease-smooth-out) forwards; }

/* ── dropdown / popover: grows from its trigger, closes quicker ── */
@keyframes t-drop-in { from { opacity: 0; transform: scale(var(--scale-medium)) translateY(calc(-1 * var(--distance-micro))); } to { opacity: 1; transform: none; } }
@keyframes t-drop-out { to { opacity: 0; transform: scale(var(--scale-tiny)); } }
.pop { animation: t-drop-in var(--duration-fast) var(--ease-smooth-out) both; will-change: transform, opacity; }
.pop.is-closing { animation: t-drop-out var(--duration-quick) var(--ease-smooth-out) forwards; pointer-events: none; }
.pop .mi { transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out); }

/* ── toast: rises with cross-blur, leaves faster ── */
@keyframes t-toast-in { from { opacity: 0; transform: translateY(16px) scale(var(--scale-medium)); filter: blur(var(--blur-small)); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes t-toast-out { to { opacity: 0; transform: translateY(8px) scale(var(--scale-small)); filter: blur(var(--blur-small)); } }
.toast { animation: t-toast-in var(--duration-slow) var(--ease-smooth-out) both; }
.toast.is-hiding { animation: t-toast-out var(--duration-medium) var(--ease-smooth-out) forwards; }

/* ── drawers & side panels: panel reveal ── */
.drawer { transition: transform var(--duration-slow) var(--ease-smooth-out), box-shadow var(--duration-slow) var(--ease-smooth-out); }
.drawer .dr-b > * { animation: t-rise var(--duration-slow) var(--ease-smooth-out) both; }
.drawer .dr-b > *:nth-child(2) { animation-delay: 40ms; } .drawer .dr-b > *:nth-child(3) { animation-delay: 80ms; } .drawer .dr-b > *:nth-child(4) { animation-delay: 120ms; } .drawer .dr-b > *:nth-child(n+5) { animation-delay: 160ms; }
.drawer.t-live .dr-b > * { animation: none; }
.sheet-dr.in { animation: t-panel-in var(--duration-slow) var(--ease-smooth-out) both; }
@keyframes t-panel-in { from { opacity: 0; transform: translateX(24px); filter: blur(var(--blur-small)); } to { opacity: 1; transform: none; filter: blur(0); } }
.map-ctl.tr, .map-ctl.tl { transition: right var(--duration-slow) var(--ease-smooth-out); }

/* ── sliding indicator for tabs & segmented controls ── */
.t-tabs-host { position: relative; }
.t-ind { position: absolute; left: 0; pointer-events: none; transition: transform var(--duration-fast) var(--ease-smooth-out), width var(--duration-fast) var(--ease-smooth-out); will-change: transform, width; }
.t-ind.line { bottom: -1px; height: 2px; border-radius: 2px; background: currentColor; }
.t-ind.pill { top: 0; z-index: 0; border-radius: inherit; }
.t-tabs-host.line-host > button.on { border-bottom-color: transparent !important; }
.t-tabs-host.pill-host > button { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; transition: color var(--duration-fast) var(--ease-smooth-out); }
.seg .t-ind.pill, .mseg .t-ind.pill { background: var(--sheet); box-shadow: 0 1px 2px rgba(16,24,40,.1), 0 0 0 1px var(--hair); border-radius: 7px; }
.statusbar .t-ind.pill { background: var(--t1); border-radius: 9px; }
.seg.seg-inline .t-ind.pill { border-radius: 6px; }
.m-duty .t-ind.pill { background: var(--sheet); box-shadow: 0 1px 3px rgba(0,0,0,.1); border-radius: 9px; }

/* ── number pop-in on live values ── */
@keyframes t-num { 0% { opacity: 0; transform: translateY(var(--distance-base)); filter: blur(var(--blur-small)); } 100% { opacity: 1; transform: none; filter: blur(0); } }
.t-num-pop { display: inline-block; animation: t-num var(--duration-fast) var(--ease-smooth-out); }
@keyframes t-flash { 0% { background-color: color-mix(in srgb, var(--accent) 14%, transparent); } 100% { background-color: transparent; } }
.t-flash { animation: t-flash 900ms var(--ease-out); border-radius: 4px; }

/* ── icon swap (theme toggle, play/pause, chevrons) ── */
@keyframes t-icon-in { from { opacity: 0; transform: scale(.5) rotate(-60deg); filter: blur(var(--blur-small)); } to { opacity: 1; transform: none; filter: blur(0); } }
.t-icon-in { animation: t-icon-in var(--duration-fast) var(--ease-in-out); }

/* ── notification badge pop ── */
@keyframes t-badge { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.t-badge-pop { animation: t-badge var(--duration-very-slow) var(--ease-bounce); }

/* ── text swap (status labels that change in place) ── */
@keyframes t-swap { from { opacity: 0; transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small)); } to { opacity: 1; transform: none; filter: blur(0); } }
.t-swap { animation: t-swap var(--duration-quick) var(--ease-in-out); }

/* ── accordion-ish groups: items cascade in ── */
.grp-h .chev { transition: transform var(--duration-fast) var(--ease-smooth-out); }
.grp.open .grp-items .it { animation: t-rise var(--duration-slow) var(--ease-smooth-out) both; }
.grp.open .grp-items .it:nth-child(2) { animation-delay: 40ms; } .grp.open .grp-items .it:nth-child(3) { animation-delay: 80ms; } .grp.open .grp-items .it:nth-child(n+4) { animation-delay: 120ms; }
.grp.t-live .grp-items .it { animation: none; }

/* ── feed & thread: new rows arrive softly ── */
.ev2, .bub, .mb { animation: t-rise var(--duration-slow) var(--ease-smooth-out) both; }
.t-quiet .ev2, .t-quiet .bub, .t-quiet .mb { animation: none; }

/* ── press & hover feedback ── */
.btn, .ibtn, .icon-chip, .chip, .rail-btn, .nav, .mbtn, .zoomgrp button, .m-btn, .ms-t, .sel-card, .rp-play, .qcard, .wo-card { transition: background-color var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out), box-shadow var(--duration-fast) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out), filter var(--duration-quick) var(--ease-out); }
.btn:active:not([aria-disabled="true"]), .ibtn:active, .icon-chip:active, .chip:active, .mbtn:active, .zoomgrp button:active, .m-btn:active, .rp-play:active, .rail-btn:active, .sel-card:active { transform: scale(var(--scale-medium)); }
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary .key { transition: transform var(--duration-fast) var(--ease-bounce); }
.btn-primary:hover .key { transform: rotate(90deg) scale(1.06); }
.rail-btn .i { transition: transform var(--duration-fast) var(--ease-smooth-out); }
.rail-btn:hover .i { transform: translateY(-1px) scale(1.06); }
.rail .tip { transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out); transition-delay: 0ms; }
.rail-btn:hover .tip { transition-delay: var(--duration-micro); }
.nav .i { transition: transform var(--duration-fast) var(--ease-smooth-out); }
.nav:hover .i { transform: translateX(1px); }
.mrow, .rrow, .hrow, .vrow, .conv, .ac-i, .tbl tbody tr td, .run-row { transition: background-color var(--duration-quick) var(--ease-out); }
.mrow .i:last-child, .rrow .i:last-child { transition: transform var(--duration-fast) var(--ease-smooth-out); }
.mrow:hover > .i:last-child { transform: translateX(3px); }
.kpi, .card.tile, .vcard, .vcard2, .intg, .m-card[data-dt], .lg { transition: transform var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out), border-color var(--duration-fast) var(--ease-smooth-out); }
.kpi:hover, .card.tile:hover { border-color: var(--strong); }
.vcard:hover, .m-card[data-dt]:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
.qcard:hover, .wo-card:hover { transform: translateY(-1px); }
.g-bar { transition: transform var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out), left var(--duration-slow) var(--ease-smooth-out), width var(--duration-slow) var(--ease-smooth-out); }
.bar i, .progress span, .m-prog i, .duo i, .blocks span, .meter i, .hb i b, .cam-bar i { transition: width var(--duration-slow) var(--ease-smooth-out), flex-grow var(--duration-slow) var(--ease-smooth-out), background-color var(--duration-fast) var(--ease-out); }
.gauge path { transition: stroke-dasharray var(--duration-slow) var(--ease-smooth-out), stroke-dashoffset var(--duration-slow) var(--ease-smooth-out); }
.cb i { transition: height var(--duration-slow) var(--ease-smooth-out); transform-origin: bottom; }
.t-enter .cb i { animation: t-grow var(--duration-very-slow) var(--ease-smooth-out) both; animation-delay: calc(200ms + var(--b, 0) * 30ms); }
@keyframes t-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.t-enter .cline path { stroke-dasharray: 2000; animation: t-draw 900ms var(--ease-smooth-out) both 200ms; }
@keyframes t-draw { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }

/* ── map markers & clusters ── */
.vm .body { transition: transform var(--duration-fast) var(--ease-bounce), box-shadow var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-slow) var(--ease-out); }
.mk-v:hover .vm .body { transform: scale(1.22); }
.vm .lbl { transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-smooth-out); }
.mk-v:hover .vm .lbl { transform: translateX(2px); }
.vm.sel:before { animation: t-halo 2.4s var(--ease-in-out) infinite; }
@keyframes t-halo { 0%, 100% { transform: scale(.85); opacity: .9; } 50% { transform: scale(1.1); opacity: .5; } }
.cl { transition: transform var(--duration-fast) var(--ease-bounce); }
.mk-cl:hover .cl { transform: scale(1.1); }

/* ── skeleton shimmer & loading ── */
.sk { animation: none !important; background: linear-gradient(90deg, var(--skel) 0%, color-mix(in srgb, var(--skel) 40%, var(--sheet)) 45%, var(--skel) 90%) 0 0 / 220% 100%; animation: t-shimmer 1.3s var(--ease-linear) infinite !important; }
@keyframes t-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.map-skel .pill { animation: t-toast-in var(--duration-slow) var(--ease-smooth-out) both; }
.t-shimmer-text { background: linear-gradient(90deg, var(--t3) 0%, var(--t1) 50%, var(--t3) 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: t-shimmer 1.6s var(--ease-linear) infinite; }
.cw-step { animation: t-rise var(--duration-slow) var(--ease-smooth-out) both; }

/* ── toggle with overshoot ── */
.tg span:before { transition: transform var(--duration-fast) var(--ease-bounce); }
.tg span { transition: background-color var(--duration-fast) var(--ease-out); }

/* ── focus ring eases in ── */
.search, .field input, .field textarea, .field select, .m-box, .m-compose { transition: border-color var(--duration-quick) var(--ease-out), box-shadow var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-out); }

/* ── phone screen tab change ── */
.pf-body.t-swap-body > * { animation: t-rise var(--duration-slow) var(--ease-smooth-out) both; }
.pf-body.t-swap-body > *:nth-child(2) { animation-delay: 40ms; } .pf-body.t-swap-body > *:nth-child(3) { animation-delay: 80ms; } .pf-body.t-swap-body > *:nth-child(n+4) { animation-delay: 120ms; }
.pf-nav button { transition: color var(--duration-fast) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out); }
.pf-nav button.on .i { animation: t-icon-in var(--duration-fast) var(--ease-in-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .t-ind { transition: none !important; }
}