/* Motion: short, soft and quiet. Everything here moves with the individual `translate` /
   `scale` properties rather than `transform`, so it composes with the transforms other
   sheets already use for positioning instead of replacing them. */
:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .16s;
  --t-med: .24s;
}

/* a page settles in when it replaces the last one; the tickers that decorate a page never
   touch #main's own children, so this runs once per page and not on every repaint */
#main > * { animation: sycfRise var(--t-med) var(--ease-out) backwards; }
#main > .page-glow { animation-name: sycfFade; animation-duration: .5s; }
@keyframes sycfRise { from { opacity: 0; translate: 0 6px; } }
@keyframes sycfFade { from { opacity: 0; } }

/* rail */
.side .nav-item, .side .nav-item .ico { transition: color var(--t-fast) ease, background-color var(--t-fast) ease; }

/* artwork: the cover leans in under the pointer and the play disc grows into place */
.station .cover .cover-img { transition: scale .4s var(--ease-out), filter .4s var(--ease-out); }
.station:hover .cover .cover-img { scale: 1.04; filter: brightness(1.06); }
.station .hover-play { scale: .88; transition: opacity var(--t-fast) ease, background-color var(--t-fast) ease, scale var(--t-fast) var(--ease-out) !important; }
.station:hover .hover-play, .station .hover-play.is-on { scale: 1; }
.station .hover-play:active { scale: .92; }
.station h3 { transition: color var(--t-fast) ease; }

.genre-tile, #main .genre-tile { transition: filter var(--t-fast) ease, scale var(--t-fast) var(--ease-out) !important; }
.genre-tile:active { scale: .98; }

/* buttons answer a press */
.stn-play, #stnPlay, .stn-mymusic, .stn-ghost, .tag-btn, .biz-pill, .viewall, .hist-btn {
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease,
    filter var(--t-fast) ease, opacity var(--t-fast) ease, scale var(--t-fast) var(--ease-out);
}
.stn-play:not(:disabled):hover, #stnPlay:hover { filter: brightness(1.08); }
.stn-play:not(:disabled):active, #stnPlay:active, .tag-btn:active, .biz-pill:active, .hist-btn:active { scale: .96; }
.stn-mymusic .ico, .stn-ghost .ico { transition: opacity var(--t-fast) ease; }

.search-wrap { transition: background-color var(--t-med) ease, border-color var(--t-med) ease; }
.stn-tracks li { transition: background-color var(--t-fast) ease; }

/* menus drop in from their button */
.place-menu:not([hidden]), .help-menu:not([hidden]), .account-menu:not([hidden]),
.device-pop:not([hidden]), .sched-pop {
  animation: sycfDrop var(--t-fast) var(--ease-out) backwards;
}
@keyframes sycfDrop { from { opacity: 0; translate: 0 -4px; scale: .98; } }
.place-menu a, .place-menu button, .help-menu a, .account-menu a, .account-menu button, .sched-pop button {
  transition: background-color var(--t-fast) ease;
}

/* scheduling: the gold thumb slides between Automatic and Manual (the two halves are equal
   so it can), and Play schedule eases between its live and greyed-out states */
.sched-mode { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; isolation: isolate; }
.sched-mode::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 999px; background: #C9A227; z-index: -1;
  transition: translate var(--t-med) var(--ease-out), opacity var(--t-fast) ease;
}
.sched-mode:has([data-mode="manual"][aria-checked="true"])::before { translate: 100% 0; }
.sched-mode:not(:has([aria-checked="true"]))::before { opacity: 0; }
.sched-mode button { transition: color var(--t-med) ease, scale var(--t-fast) var(--ease-out); }
.sched-mode button[aria-checked="true"] { background: transparent; }
.sched-mode button:not([aria-checked="true"]):not(:disabled):hover { color: #fff; }
.sched-mode button:not(:disabled):active { scale: .96; }
.sched-playnow {
  transition: background-color var(--t-med) ease, color var(--t-med) ease, border-color var(--t-med) ease,
    scale var(--t-fast) var(--ease-out);
}
.sched-playnow .ico { transition: translate var(--t-fast) var(--ease-out); }
.sched.is-on .sched-playnow:hover .ico { translate: 2px 0; }
.sched.is-on .sched-playnow:active { scale: .96; }

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