/* ============================================================
   COMPONENTS — nav.css · the left nav and the shell around it.
   Ported from the app shell prototype (components/nav.css +
   shell.css); the measurements are nav.md's, the values ours.

   .sy-shell            the frame: nav column + main
     .is-hidden         the nav is gone; a show button at top-left
     .is-peek           …and it peeks below that button (hug height)
     .is-narrow         under 900px: the nav is a drawer
     .is-drawer         …and the drawer is open, over a scrim
   ============================================================ */

.sy-shell {
  --nav-w: 272px;            /* 260 in the original; a little wider for 15px rows */
  --nav-item-h: 38px;        /* nav.md: 34; 38 with rows at the message size (#51) */
  --nav-item-pad: 8px;
  --nav-item-gap: 12px;
  --nav-end-slot: 22px;      /* the trailing slot, reserved on every recent */
  position: relative;
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  transition: grid-template-columns var(--motion-layout) var(--ease);
}
.sy-shell.is-hidden { grid-template-columns: 0px minmax(0, 1fr); }
.sy-main { position: relative; grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; }   /* pinned: when the nav leaves the flow (peek, drawer), main must not slide into its column */

/* ---------- The nav column ---------- */
.sy-nav {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--surface-sunken);
  border-right: 1px solid var(--border);   /* with main flat, this tint + hairline is the boundary (APP_SHELL.md rule 6) */
}
.sy-nav > * { min-width: calc(var(--nav-w) - 24px); margin-left: 12px; margin-right: 12px; }
.sy-nav__head { flex: none; display: flex; align-items: center; gap: 9px; height: 56px; padding: 0 0 0 4px; }   /* 56: the screens' headers (57 with their hairline), so logo, hide and show share one line */
.sy-nav__home { display: inline-flex; align-items: center; gap: 9px; height: 32px; margin-left: -4px; padding: 0 6px 0 4px; border: 0; border-radius: var(--radius-md); background: none; color: var(--text); font: inherit; cursor: pointer; }
.sy-nav__home:hover { background: var(--hover); }
.sy-nav__logo { width: 24px; height: 24px; flex: none; color: var(--text); }
.sy-nav__brand { font-size: var(--font-lg); font-weight: var(--weight-strong); letter-spacing: -.01em; }
.sy-nav__sp { flex: 1; }
.sy-nav__head .sy-icon-btn { color: var(--text-muted); }
.sy-nav__pane, .sy-shell__show svg { width: 20px; height: 20px; }

.sy-nav__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 16px; scrollbar-width: none; }
.sy-nav__stack, .sy-nav__group { display: flex; flex-direction: column; gap: 2px; }
.sy-nav__group + .sy-nav__group, .sy-nav__stack + .sy-nav__group { margin-top: 18px; }
.sy-nav__stack .sy-nav__group { margin-top: 0; }

/* ---------- Items: destinations and recents ---------- */
.sy-nav__item {
  display: flex; align-items: center; gap: var(--nav-item-gap);
  width: 100%; height: var(--nav-item-h); min-width: 0; padding: 0 var(--nav-item-pad);
  border: 0; border-radius: var(--radius-md); background: none;
  color: var(--text); font: inherit; font-size: var(--font-base); text-align: left; cursor: pointer;
  transition: background var(--motion-instant) var(--ease), color var(--motion-fast) var(--ease);
}
.sy-nav__ic { --ms-size: 20px; color: var(--text-muted); transition: color var(--motion-fast) var(--ease); }   /* icons sit one step back (nav.md § States) */
.sy-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-nav__item:hover { background: var(--hover); }
.sy-nav__item:hover .sy-nav__ic { color: var(--text); }
.sy-nav__item[aria-current="page"] { background: var(--selected); font-weight: var(--weight-medium); }
.sy-nav__item[aria-current="page"] .sy-nav__ic { color: var(--text); --ms-fill: 1; }
.sy-nav__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }   /* inset: an outward ring is clipped by the nav's padding */

/* Inbox's count: what waits on you, in cobalt (#52) */
.sy-nav__badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--highlight); color: var(--highlight-fg); font-size: var(--font-2xs); font-weight: var(--weight-strong); line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }

/* New project: treatment C, a small neutral disc (nav.md § Create) */
.sy-nav__disc { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -1px; border-radius: 50%; background: var(--selected); }
.sy-nav__disc .ms { --ms-size: 17px; color: var(--text); }

/* The section label: sentence case (#11), set back by size and weight, not by a paler grey */
.sy-nav__section { display: flex; align-items: center; height: 32px; margin: 0; padding: 0 2px 0 var(--nav-item-pad); color: var(--text-muted); font-size: var(--font-sm); font-weight: var(--weight-medium); }
.sy-nav__section > span { flex: 1; }
.sy-nav__search { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-md); background: none; color: var(--text-muted); cursor: pointer; }
.sy-nav__search:hover { background: var(--selected); color: var(--text); }
.sy-nav__search .ms { --ms-size: 18px; }

/* Recents: one line, no icon; one trailing slot shared by the status dot and ⋯ */
.sy-nav__row { position: relative; }
.sy-nav__row .sy-nav__item { padding-right: calc(var(--nav-end-slot) + 10px); }
.sy-nav__status { position: absolute; top: 50%; right: 8px; display: grid; place-items: center; width: var(--nav-end-slot); height: var(--nav-end-slot); transform: translateY(-50%); pointer-events: none; }
.sy-nav__status > .sy-dot { display: none; width: 7px; height: 7px; border-radius: 50%; }
.sy-nav__status > .sy-dot--you { display: block; background: var(--highlight); }   /* waiting on you: cobalt, "your move" (#19) */
.sy-nav__more { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-muted); cursor: pointer; opacity: 0; transform: translateY(-50%); }
.sy-nav__more .ms { --ms-size: 18px; }
.sy-nav__more:hover { background: var(--hover); color: var(--text); }
.sy-nav__row:hover .sy-nav__more, .sy-nav__row:focus-within .sy-nav__more, .sy-nav__row.is-menu .sy-nav__more { opacity: 1; }
.sy-nav__row:hover .sy-nav__status, .sy-nav__row:focus-within .sy-nav__status, .sy-nav__row.is-menu .sy-nav__status { opacity: 0; }
.sy-nav__row.is-menu .sy-nav__item { background: var(--hover); }

/* Running: an agent is working, so the label sweeps (nav.md § The status slot) */
.sy-nav__row.is-running .sy-nav__label {
  background: linear-gradient(90deg, var(--text) 0 38%, color-mix(in oklab, var(--text) 35%, transparent) 50%, var(--text) 62% 100%) 0 0 / 280% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sySweep 2.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .sy-nav__row.is-running .sy-nav__label { animation: none; color: var(--text); background: none; } }

/* ---------- Account ---------- */
.sy-nav__foot { flex: none; padding: 8px 0 10px; border-top: 1px solid var(--border); }
.sy-nav__acct { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 8px 0 6px; border: 0; border-radius: var(--radius-md); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sy-nav__acct:hover, .sy-nav__acct[aria-expanded="true"] { background: var(--hover); }
.sy-nav__acct .sy-av { --s: 32px; font-size: 12px; }
.sy-nav__acct-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sy-nav__acct-t b, .sy-nav__acct-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-nav__acct-t b { font-size: var(--font-base); font-weight: var(--weight-medium); }
.sy-nav__acct-t small { color: var(--text-muted); font-size: var(--font-sm); }
.sy-nav__acct-caret { --ms-size: 18px; color: var(--text-muted); }

/* ---------- Menus (fixed, on <body>: row menu, account menu, Appearance flyout) ---------- */
.sy-menu { position: fixed; z-index: 80; min-width: 220px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-menu); opacity: 0; transform: translateY(3px); pointer-events: none; visibility: hidden; transition: opacity var(--motion-fast) var(--ease), transform var(--motion-base) var(--ease), visibility 0s linear var(--motion-base); }
.sy-menu.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.sy-menu > button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--radius-md); background: none; color: var(--text); font: inherit; font-size: var(--font-sm); text-align: left; cursor: pointer; }
.sy-menu > button:hover, .sy-menu > button:focus-visible, .sy-menu > button[aria-expanded="true"] { background: var(--hover); }   /* focus also gets the ring (basics) */
.sy-menu > button > .ms:first-child { --ms-size: 18px; color: var(--text-muted); }
.sy-menu hr { height: 1px; margin: 6px 4px; border: 0; background: var(--border); }
.sy-menu__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sy-menu__t small { color: var(--text-muted); font-size: var(--font-xs); }
.sy-menu kbd { color: var(--text-muted); font: inherit; font-size: var(--font-xs); }
.sy-menu__chev { --ms-size: 18px; color: var(--text-muted); }
.sy-menu__h { padding: 6px 10px 4px; color: var(--text-muted); font-size: var(--font-xs); font-weight: var(--weight-medium); }
.sy-menu__check { --ms-size: 18px; visibility: hidden; }   /* holds its slot, so rows don't shift when the choice moves */
.sy-menu [aria-checked="true"] .sy-menu__check { visibility: visible; }
.sy-menu__who { display: flex; align-items: center; gap: 10px; padding: 8px 8px 4px; }
.sy-menu__who .sy-av { --s: 34px; font-size: 12px; }
.sy-menu__who span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sy-menu__who b { font-size: var(--font-sm); font-weight: var(--weight-medium); }
.sy-menu__who small { color: var(--text-muted); font-size: var(--font-xs); }
.sy-nav__acctmenu { width: 252px; }
.sy-nav__flyout { width: 220px; }

/* ---------- The search palette ---------- */
.sy-palette { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding-top: 16vh; background: var(--scrim); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--motion-fast) var(--ease), visibility 0s linear var(--motion-base); }
.sy-palette.is-open { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.sy-palette__box { width: min(560px, 92vw); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-menu); overflow: hidden; transform: translateY(-6px); transition: transform var(--motion-base) var(--ease); }
.sy-palette.is-open .sy-palette__box { transform: none; }
.sy-palette__field { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--border); }
.sy-palette__field > .ms { --ms-size: 20px; color: var(--text-muted); }
.sy-palette__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: var(--font-base); }
.sy-palette__list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.sy-palette__h { padding: 6px 10px 4px; color: var(--text-muted); font-size: var(--font-xs); font-weight: var(--weight-medium); }
.sy-palette__list button { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: none; color: var(--text); font: inherit; font-size: var(--font-sm); text-align: left; cursor: pointer; }
.sy-palette__list button:hover { background: var(--hover); }
/* #65: the row's icon and name sit on the field's (icon at 16px, text at 46px); no status dots here */
.sy-palette__list button .ms { --ms-size: 20px; color: var(--text-muted); }
.sy-palette__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-palette="plain"] .sy-palette__list button .ms { display: none; }
.sy-palette__empty { padding: 20px 10px; color: var(--text-muted); font-size: var(--font-sm); text-align: center; }

/* ---------- Hidden, peek and the drawer ---------- */
.sy-shell__show { position: absolute; top: 12px; left: 12px; z-index: 25; display: none; background: var(--bg); }
.sy-shell.is-hidden .sy-shell__show { display: inline-grid; }
.sy-shell.is-hidden .sy-nav { border-right-color: transparent; }

/* Peek: the nav hangs below the show button, hugging its content; main doesn't move (rule 2) */
.sy-shell.is-peek .sy-nav {
  position: absolute; top: 52px; left: 12px; bottom: auto; width: var(--nav-w); max-height: calc(100% - 64px);
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-menu);
  animation: syPeek .18s var(--ease) both;
}
.sy-shell.is-peek .sy-nav__scroll { flex: 0 1 auto; }
.sy-shell.is-peek .sy-nav__hide { display: none; }   /* one control per state (rule 4) */
@keyframes syPeek { from { opacity: 0; transform: translateY(-4px); } }

/* Narrow: a drawer off the left edge, over a scrim; docking isn't offered */
.sy-shell.is-narrow { grid-template-columns: 0px minmax(0, 1fr); }
.sy-shell.is-narrow .sy-nav { position: absolute; top: 0; bottom: 0; left: 0; width: min(var(--nav-w), 84%); border-right: 1px solid var(--border); box-shadow: var(--shadow-pop); transform: translateX(-102%); transition: transform .3s var(--ease); z-index: 40; }
.sy-shell.is-narrow.is-drawer .sy-nav { transform: none; }
.sy-shell__scrim { position: absolute; inset: 0; z-index: 35; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.sy-shell.is-drawer .sy-shell__scrim { opacity: 1; pointer-events: auto; }

/* Inbox count: treatments to compare (jams/nav), set on .sy-shell[data-badge] */
.sy-shell[data-badge="neutral"] .sy-nav__badge { background: var(--selected); color: var(--text); font-weight: var(--weight-medium); }
.sy-shell[data-badge="neutral"] .sy-nav__item[aria-current="page"] .sy-nav__badge { background: var(--bg); }
.sy-shell[data-badge="plain"] .sy-nav__badge { min-width: 0; padding: 0; background: none; color: var(--text-muted); font-size: var(--font-sm); font-weight: var(--weight-normal); }
.sy-shell[data-badge="dot"] .sy-nav__badge { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 0; background: none; color: var(--text-muted); font-size: var(--font-sm); font-weight: var(--weight-normal); }
.sy-shell[data-badge="dot"] .sy-nav__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--highlight); }
/* The default (#53): just the dot, the same one Recents uses. The count lives on the Inbox page. */
.sy-shell[data-badge="dotonly"] .sy-nav__badge { width: 7px; min-width: 0; height: 7px; margin-right: 8px; padding: 0; overflow: hidden; border-radius: 50%; background: var(--highlight); color: transparent; font-size: 0; }

/* ============================================================
   RECENTS STATES (#56, to compare on jams/nav), .sy-shell[data-rstate]
   sweep   (the port) the label sweeps while an agent works
   loader  the label stays still; a 14px 3×3 loader (#18) sits in the
           trailing slot while an agent works; the cobalt dot wins over
           it when something waits on you; unread sessions are bold
   ============================================================ */
.sy-nav__status .sy-loader { --s: 14px; display: none; }
.sy-shell[data-rstate="loader"] .sy-nav__row.is-running .sy-nav__label { animation: none; background: none; color: var(--text); }
.sy-shell[data-rstate="loader"] .sy-nav__status .sy-loader { display: inline-grid; }
.sy-shell[data-rstate="loader"] .sy-nav__row.is-unread .sy-nav__label { font-weight: var(--weight-strong); }

/* quiet (#56, round 2): the same states, turned down. Read sessions sit a shade back; unread ones are at
   full ink and a touch heavier; a waiting session gets the dot and nothing else; the loader is small and dim. */
.sy-shell[data-rstate="quiet"] .sy-nav__row.is-running .sy-nav__label { animation: none; background: none; }
.sy-shell[data-rstate="quiet"] .sy-nav__row .sy-nav__label { color: var(--text-muted); }
.sy-shell[data-rstate="quiet"] .sy-nav__row.is-unread .sy-nav__label,
.sy-shell[data-rstate="quiet"] .sy-nav__row .sy-nav__item[aria-current="page"] .sy-nav__label { color: var(--text); }
.sy-shell[data-rstate="quiet"] .sy-nav__row.is-unread:not(.is-you) .sy-nav__label { font-weight: var(--weight-medium); }
.sy-shell[data-rstate="quiet"] .sy-nav__row:hover .sy-nav__label { color: var(--text); }
.sy-shell[data-rstate="quiet"] .sy-nav__status .sy-loader { --s: 10px; display: inline-grid; opacity: .55; }

/* pulse (#56, round 3, Peyman's): the label sweeps while an agent works, and a grey dot pulses beside it;
   when the work lands, the dot stays, steady: a new message. Cobalt still only means "your move" (#54). */
.sy-shell[data-rstate="pulse"] .sy-nav__status > .sy-dot--work,
.sy-shell[data-rstate="pulse"] .sy-nav__status > .sy-dot--new { display: block; background: var(--working); }
.sy-shell[data-rstate="pulse"] .sy-nav__status > .sy-dot--work { animation: syDotPulse 1.4s ease-in-out infinite; }
.sy-shell[data-rstate="pulse"] .sy-nav__status > .sy-dot--new { animation: syDotLand .5s var(--ease-spring) both; }
@keyframes syDotPulse { 0%, 100% { transform: scale(.55); opacity: .35; } 50% { transform: scale(1); opacity: 1; } }
@keyframes syDotLand { from { transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .sy-shell[data-rstate="pulse"] .sy-nav__status > .sy-dot { animation: none; } }

/* pulseonly (#56, round 4): one motion per row. No sweep; the grey dot breathes slowly while an agent works,
   then settles into the steady new-message dot. */
.sy-shell[data-rstate="pulseonly"] .sy-nav__row.is-running .sy-nav__label { animation: none; background: none; color: var(--text); }
.sy-shell[data-rstate="pulseonly"] .sy-nav__status > .sy-dot--work,
.sy-shell[data-rstate="pulseonly"] .sy-nav__status > .sy-dot--new { display: block; background: var(--working); }
.sy-shell[data-rstate="pulseonly"] .sy-nav__status > .sy-dot--work { animation: syBreathe 1.8s ease-in-out infinite; }
.sy-shell[data-rstate="pulseonly"] .sy-nav__status > .sy-dot--new { animation: syDotLand .5s var(--ease-spring) both; }
@media (prefers-reduced-motion: reduce) { .sy-shell[data-rstate="pulseonly"] .sy-nav__status > .sy-dot { animation: none; } }

/* ---------- #62: drawn icons that move on hover (after Muse) ----------
   Stroke 2 on a 24 grid at 20px, Material Rounded's weight. --ko is the row's own colour, so a detail
   drawn in it reads as cut out of a filled (selected) icon. Each plays once; nav.js times .is-play. */
.sy-nav__item { --ko: var(--surface-sunken); }
.sy-nav__item:hover { --ko: color-mix(in oklab, var(--text) 5%, var(--surface-sunken)); }
.sy-nav__item[aria-current="page"] { --ko: color-mix(in oklab, var(--text) 8%, var(--surface-sunken)); }
.sy-ic { flex: none; width: var(--ms-size); height: var(--ms-size); overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sy-ic * { transform-box: fill-box; transform-origin: center; }
.sy-ic__gap { fill: var(--ko); stroke: var(--ko); stroke-width: 5; }
.sy-ic__dots { fill: currentColor; stroke: none; }
.sy-ic__dots circle { transform: scale(0); }
.sy-ic__letter { opacity: 0; }
[aria-current="page"] .sy-ic__body { fill: currentColor; }
[aria-current="page"] .sy-ic__cut { stroke: var(--ko); }
[aria-current="page"] .sy-ic__dots { fill: var(--ko); }

/* New stays still (#62): it's an action you take many times a day, not a place */

/* Inbox: a letter drops in and the tray gives under it */
.is-play .sy-ic__letter { animation: syIcLetter 900ms var(--ease) both; }
.is-play .sy-ic__tray { animation: syIcTray 900ms var(--ease); }
@keyframes syIcLetter { 0% { opacity: 0; transform: translateY(-6px); } 30% { opacity: 1; transform: translateY(0); } 55% { opacity: 1; transform: translateY(4.5px); } 70%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes syIcTray { 0%, 52% { transform: translateY(0); } 64% { transform: translateY(1px); } 82% { transform: translateY(-.4px); } 100% { transform: translateY(0); } }

/* Sessions: the front bubble types (the working dots), the back one leans in. ~1s; data-ic-sess="long" is the first 1.25s cut */
.is-play .sy-ic__dots circle { animation: syIcDot 1000ms var(--ease) both; }
.is-play .sy-ic__dots circle:nth-child(2) { animation-delay: 70ms; }
.is-play .sy-ic__dots circle:nth-child(3) { animation-delay: 140ms; }
.is-play .sy-ic__back { animation: syIcLean 1000ms var(--ease); }
.sy-shell[data-ic-sess="long"] .is-play .sy-ic__dots circle, .sy-shell[data-ic-sess="long"] .is-play .sy-ic__back { animation-duration: 1250ms; }
.sy-shell[data-ic-sess="long"] .is-play .sy-ic__dots circle:nth-child(2) { animation-delay: 90ms; }
.sy-shell[data-ic-sess="long"] .is-play .sy-ic__dots circle:nth-child(3) { animation-delay: 180ms; }
@keyframes syIcDot { 0% { transform: scale(0); } 18% { transform: scale(1.1); } 26% { transform: scale(1); } 38% { transform: translateY(-1.6px); } 50% { transform: translateY(0); } 62% { transform: translateY(-1.6px); } 74%, 82% { transform: translateY(0) scale(1); } 100% { transform: scale(0); } }
@keyframes syIcLean { 0%, 100% { transform: translate(0, 0); } 20%, 75% { transform: translate(-.6px, -.6px); } }

/* Artifacts: the tiles pop in reading order, like things landing in a grid. data-ic-art="shuffle" is the first cut */
.is-play .sy-ic__t1, .is-play .sy-ic__t2, .is-play .sy-ic__t3, .is-play .sy-ic__t4 { animation: syIcPop 440ms both; }
.is-play .sy-ic__t2 { animation-delay: 70ms; }
.is-play .sy-ic__t4 { animation-delay: 140ms; }
.is-play .sy-ic__t3 { animation-delay: 210ms; }
@keyframes syIcPop { 0% { transform: scale(1); animation-timing-function: cubic-bezier(.4,0,1,1); } 32% { transform: scale(.6); animation-timing-function: var(--ease-spring); } 100% { transform: scale(1); } }
.sy-shell[data-ic-art="shuffle"] .is-play .sy-ic__t1 { animation: syIcT1 760ms var(--ease-spring); }
.sy-shell[data-ic-art="shuffle"] .is-play .sy-ic__t2 { animation: syIcT2 760ms var(--ease-spring); }
.sy-shell[data-ic-art="shuffle"] .is-play .sy-ic__t3 { animation: syIcT3 760ms var(--ease-spring); }
.sy-shell[data-ic-art="shuffle"] .is-play .sy-ic__t4 { animation: syIcT4 760ms var(--ease-spring); }
@keyframes syIcT1 { 40% { transform: translate(5px, 0) scale(.72); } to { transform: translate(10px, 0); } }
@keyframes syIcT2 { 40% { transform: translate(0, 5px) scale(.72); } to { transform: translate(0, 10px); } }
@keyframes syIcT3 { 40% { transform: translate(-5px, 0) scale(.72); } to { transform: translate(-10px, 0); } }
@keyframes syIcT4 { 40% { transform: translate(0, -5px) scale(.72); } to { transform: translate(0, -10px); } }

.sy-shell[data-icons="still"] .is-play * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sy-nav .is-play * { animation: none !important; } }