/* The showcase look (option C, chosen 2026-10-03): bigger hero moments, motion that means
 * something, and 3D where space is the data. Loaded after fx.css and built on its tokens:
 * Minecraft materials on stone-dark surfaces, hairlines instead of glow, no gradient text, no
 * glass. Every animation here is switched off by prefers-reduced-motion at the bottom.
 *
 * core/motion.js owns the classes starting mo-; pages own the ones starting sc-.
 */

/* --- route changes -------------------------------------------------------------------- */

/* The header and the rail stay put while the page beneath them changes: they get names of
   their own, so only main takes part in the cross-fade. */
body > header { view-transition-name: mo-header; }
body > nav.side { view-transition-name: mo-rail; }
body > main { view-transition-name: mo-main; }
::view-transition-old(mo-main) { animation: mo-page-out .2s ease-in both; }
::view-transition-new(mo-main) { animation: mo-page-in .42s var(--fx-ease) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@keyframes mo-page-out { to { opacity: 0; transform: translateY(-6px) scale(.995); } }
@keyframes mo-page-in { from { opacity: 0; transform: translateY(10px); } }

/* --- reveal on scroll ----------------------------------------------------------------- */

.mo-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--fx-ease), transform .7s var(--fx-ease); }
.mo-reveal.mo-in { opacity: 1; transform: none; }

/* --- figures -------------------------------------------------------------------------- */

[data-tween] { font-variant-numeric: tabular-nums; }

/* --- cards that lean -------------------------------------------------------------------- */

.srv-card {
  transform: perspective(900px) rotateX(var(--mo-rx, 0deg)) rotateY(var(--mo-ry, 0deg)) translateY(var(--mo-lift, 0));
  transition: transform .45s var(--fx-ease), border-color .4s ease, box-shadow .35s ease, background-color .4s ease;
  will-change: transform;
}
.srv-card.mo-tilting { --mo-lift: -3px; transition: transform .08s linear, border-color .4s ease, box-shadow .35s ease; box-shadow: 0 18px 40px rgba(0, 0, 0, .38); }
/* A light line where the pointer is, kept faint: a hairline catching light, not a glow. */
.srv-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(260px circle at var(--mo-gx, 50%) var(--mo-gy, 50%), rgba(255, 255, 255, .055), transparent 60%);
  transition: opacity .3s ease;
}
.srv-card.mo-tilting::after { opacity: 1; }
.srv-card::before { transition: background-color .5s ease; }

/* A sparkline draws itself in when the page is entered. */
#main.fx-enter canvas.srv-spark { clip-path: inset(0 100% 0 0); animation: mo-wipe 1.1s .35s var(--fx-ease) forwards; }
@keyframes mo-wipe { to { clip-path: inset(0 0 0 0); } }

/* --- skeletons ------------------------------------------------------------------------ */

.mo-skel { display: grid; gap: 14px; }
.mo-skel-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 0; min-height: 440px;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-1); }
.mo-skel-hero > div:last-child { padding: 34px; display: flex; flex-direction: column; gap: 14px; border-left: 1px solid var(--border); }
.mo-skel-kpis { margin-top: auto; display: grid; gap: 14px; }
.mo-skel-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mo-bone {
  border-radius: 8px; background: linear-gradient(100deg, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .075) 50%, rgba(255, 255, 255, .03) 70%) 0 0 / 300% 100%;
  animation: mo-shimmer 1.4s linear infinite;
}
.mo-bone.stage { border-radius: 0; min-height: 440px; }
.mo-bone.eyebrow { width: 120px; height: 11px; }
.mo-bone.title { width: 60%; height: 40px; }
.mo-bone.line { width: 90%; height: 13px; }
.mo-bone.kpi { height: 46px; }
.mo-bone.card { height: 104px; }
.mo-bone.card.tall { height: 150px; }
@keyframes mo-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* --- the overview's hero ---------------------------------------------------------------- */

.sc-hero.card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); padding: 0; min-height: 460px;
  overflow: hidden; position: relative; margin-bottom: 16px; }
.sc-stage { position: relative; min-height: 460px; overflow: hidden; }
.sc-stage::after {
  /* The stage falls away into the page at its edges, so the orbit reads as a scene and not a
     rectangle. A vignette, not a glow. */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 46%, transparent 55%, rgba(8, 10, 12, .55) 100%);
}
.sc-hero .net-orbit-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: translateY(calc(var(--mo-scroll, 0) * 70px)) scale(calc(1 - var(--mo-scroll, 0) * .06));
  opacity: calc(1 - var(--mo-scroll, 0) * .6);
  transform-origin: 50% 40%;
}
.sc-legend { position: absolute; left: 22px; bottom: 16px; right: 22px; z-index: 1; font-size: 11.5px; color: var(--text-3); pointer-events: none; }
.sc-side {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 34px 34px 26px;
  border-left: 1px solid rgba(255, 255, 255, .07);
}
.sc-eyebrow { display: flex; align-items: center; gap: 9px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--mc-grass); }
.sc-eyebrow .dot { margin: 0; }
.sc-title { margin: 0; font: 700 48px/1.02 var(--font-display); color: #fff; letter-spacing: -.005em; overflow-wrap: anywhere; }
.sc-lede { margin: 0; max-width: 38ch; font-size: 15px; line-height: 1.55; color: var(--text-1); }
.sc-lede b { font-weight: 600; color: var(--text-0); }
.sc-lede .sc-ok { color: var(--mc-grass); }
.sc-lede .sc-warn { color: var(--mc-gold); }
.sc-lede .sc-bad { color: var(--mc-redstone); }
.sc-kpis { margin-top: auto; display: grid; }
.sc-kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 16px; padding: 13px 0 12px;
  border-top: 1px solid rgba(255, 255, 255, .07); }
.sc-kpi .k { font: 600 10.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.sc-kpi .v { font: 700 38px/1 var(--font-display); color: var(--text-0); text-align: right; white-space: nowrap; }
.sc-kpi .v u { text-decoration: none; font-size: .45em; font-weight: 600; color: var(--text-2); margin-left: 4px; }
.sc-kpi .s { grid-column: 1 / -1; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-kpi .v.tone-grass { color: var(--mc-grass); }
.sc-kpi .v.sev-warn { color: var(--mc-gold); }
.sc-kpi .v.sev-high { color: var(--mc-copper); }
.sc-kpi .v.sev-crit { color: var(--mc-redstone); }
.sc-cta { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; min-width: 0; }
/* A server name can be long; the button shortens it rather than widening the page. */
.sc-cta .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-side { min-width: 0; }

/* The hero's parts arrive in order on entering the page. */
#main.fx-enter .sc-side > * { animation: fx-rise .7s var(--fx-ease) both; }
#main.fx-enter .sc-side > :nth-child(2) { animation-delay: .06s; }
#main.fx-enter .sc-side > :nth-child(3) { animation-delay: .12s; }
#main.fx-enter .sc-side > :nth-child(4) { animation-delay: .18s; }
#main.fx-enter .sc-side > :nth-child(5) { animation-delay: .26s; }
#main.fx-enter .sc-stage { animation: mo-stage-in 1.1s var(--fx-ease) both; }
@keyframes mo-stage-in { from { opacity: 0; transform: scale(1.04); } }

@media (max-width: 1100px) {
  .sc-hero.card, .mo-skel-hero { grid-template-columns: minmax(0, 1fr); }
  .sc-stage, .mo-bone.stage { min-height: 300px; }
  .sc-side, .mo-skel-hero > div:last-child { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .07); }
  .sc-title { font-size: 38px; }
}
@media (max-width: 560px) {
  .sc-side { padding: 22px 18px 18px; }
  .sc-title { font-size: 32px; }
  .sc-kpi .v { font-size: 30px; }
  .sc-legend { display: none; }
}

/* --- titles ----------------------------------------------------------------------------- */

/* Page titles in the display face at a size that announces the page, and section titles as
   editorial heads over a hairline rather than small grey capitals. Inside a server, the
   server's name rides above the page's title, so every page says whose it is. */
.page-title { font-size: 30px; line-height: 1.1; margin: 0 0 6px; color: var(--text-0); }
.page-subtitle { font-size: 14px; color: var(--text-2); }
.section-title {
  margin: 34px 0 14px; padding-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, .06);
  font: 700 12.5px/1.2 var(--font-display); letter-spacing: .12em; color: var(--text-1);
}
.card .section-title { border-bottom: 0; padding-bottom: 0; }
.sc-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.sc-kicker .dot { margin: 0; }
#main.fx-enter .page-title { animation: fx-rise .6s var(--fx-ease) both; }

/* --- server pages ------------------------------------------------------------------------ */

/* The live strip beside a server page's title. */
.sc-live { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.sc-live .k { font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.sc-live .k:not(:first-child) { margin-left: 8px; }
.sc-live b { font: 700 20px/1 var(--font-display); color: var(--text-0); min-width: 2ch; }
.sc-live b .no-reading { font: 500 11px/1 inherit; }
.sc-live u { text-decoration: none; font-size: 11px; color: var(--text-3); margin-left: -6px; }
.sc-live b.sev-ok, .sc-live b.sev-good { color: var(--mc-gold); }
.sc-live b.sev-warn { color: var(--mc-gold); }
.sc-live b.sev-high { color: var(--mc-copper); }
.sc-live b.sev-crit { color: var(--mc-redstone); }
.sc-live b[data-lv="players"] { color: var(--mc-grass); }
.sc-live b[data-lv="heap"] { color: var(--mc-diamond); }

/* Charts draw themselves in when a page is entered: the line as one dash running to its end,
   the area beneath fading up after it. */
#main.fx-enter svg.chart path.ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mo-draw 1.3s .15s var(--fx-ease) forwards; }
#main.fx-enter svg.chart path.ar { opacity: 0; animation: mo-fade .9s .6s ease forwards; }
@keyframes mo-draw { to { stroke-dashoffset: 0; } }
@keyframes mo-fade { to { opacity: 1; } }

/* --- incidents ---------------------------------------------------------------------------- */

.sc-inc-hero.card { padding: 28px 30px 18px; margin-bottom: 18px; }
/* A grid, not a wrapping flex row: a flex basis on the sentence became the page's minimum
   width on a phone and pushed every page 44 px wider than the screen. */
.sc-inc-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 40px; margin-bottom: 22px; }
.sc-inc-copy { display: grid; gap: 12px; min-width: 0; }
.sc-kpis-row { display: grid; grid-template-columns: repeat(3, auto); gap: 0 28px; margin: 0; }
.sc-kpis-row .sc-kpi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; border-top: 0; padding: 0; min-width: 0; }
.sc-kpis-row .sc-kpi .v { text-align: left; font-size: 34px; }
.sc-inc-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 132px;
  align-items: end; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.inc-day { all: unset; box-sizing: border-box; height: 100%; display: flex; align-items: flex-end; cursor: pointer;
  border-radius: 3px 3px 0 0; transition: opacity .25s, background-color .25s; }
.inc-day .stack { width: 100%; height: var(--h, 0); min-height: 3px; display: flex; flex-direction: column-reverse;
  gap: 1px; border-radius: 3px 3px 0 0; overflow: hidden; transform-origin: 50% 100%; }
.inc-day .stack i { display: block; min-height: 2px; background: var(--mc-gold); }
.inc-day .stack i.high { background: var(--mc-copper); }
.inc-day .stack i.crit { background: var(--mc-redstone); }
.inc-day.none { cursor: default; }
.inc-day.none .stack { height: 3px; background: rgba(255, 255, 255, .07); }
.inc-day:not(.none):hover, .inc-day:focus-visible { background: rgba(255, 255, 255, .04); }
.inc-day:focus-visible { outline: 1px solid var(--mc-diamond); outline-offset: 1px; }
.sc-inc-days.picked .inc-day:not(.on) { opacity: .35; }
.sc-inc-days.picked .inc-day:hover { opacity: .8; }
.sc-inc-axis { display: flex; justify-content: space-between; margin: 8px 0 10px; font: 600 10px/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
#main.fx-enter .inc-day .stack { animation: sc-bar-rise .7s var(--fx-ease) both; animation-delay: calc(.2s + var(--i, 0) * 18ms); }
.sc-inc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; }
.sc-inc-key > span { display: inline-flex; align-items: center; gap: 6px; }
.sc-inc-key > span:last-child { display: block; flex-basis: 100%; }
.sc-inc-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--mc-gold); }
.sc-inc-key i.high { background: var(--mc-copper); }
.sc-inc-key i.crit { background: var(--mc-redstone); }
.sc-kpis-row a.s { color: var(--text-3); font-size: 12px; text-decoration: none; }
.sc-kpis-row a.s:hover { color: var(--text-1); }
.inc-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 4px 2px 10px; font-size: 13.5px; color: var(--text-1); }
.inc-list-head b { color: #fff; font-weight: 600; margin-right: 4px; }
@keyframes sc-bar-rise { from { transform: scaleY(0); } }
.inc-row { transition: transform .3s var(--fx-ease), border-color .3s, background-color .3s; }
.inc-row:hover { transform: translateX(4px); }
@media (max-width: 900px) { .sc-inc-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .sc-inc-hero.card { padding: 20px 16px 14px; }
  .sc-kpis-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; width: 100%; }
  .sc-kpis-row .sc-kpi .v { font-size: 24px; }
  .sc-inc-days { gap: 2px; height: 110px; }
}

/* --- servers ------------------------------------------------------------------------------- */

.fl-head { display: grid; gap: 6px; margin: 4px 0 18px; }
.fl-lede { max-width: 76ch; }
.fl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.fl-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .03);
  color: var(--text-3); transition: border-color .2s, background-color .2s; }
.fl-search:focus-within { border-color: rgba(69, 217, 230, .5); background: rgba(69, 217, 230, .04); }
.fl-search svg { width: 16px; height: 16px; flex: none; }
.fl-search input { all: unset; flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-0); }
.fl-search input::placeholder { color: var(--text-3); }
.sc-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .02); flex-wrap: wrap; }
.sc-seg > span { font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding: 0 8px 0 6px; }
.sc-seg button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: 7px; font-size: 12.5px; color: var(--text-2); transition: background-color .2s, color .2s; }
.sc-seg button em { font: 600 11px/1 var(--font-mono); font-style: normal; color: var(--text-3); }
.sc-seg button:hover:not(:disabled) { color: var(--text-0); background: rgba(255, 255, 255, .05); }
.sc-seg button.on { color: #fff; background: rgba(255, 255, 255, .09); }
.sc-seg button.on em { color: var(--mc-grass); }
.sc-seg button[data-f="attention"].on em { color: var(--mc-gold); }
.sc-seg button:disabled { cursor: default; opacity: .4; }
.sc-seg button:focus-visible { outline: 1px solid var(--mc-diamond); }

.fl-cols, .fl-row { display: grid; align-items: center; gap: 18px;
  grid-template-columns: minmax(0, 2.3fr) minmax(150px, 1.7fr) minmax(70px, .7fr) minmax(110px, 1fr) minmax(70px, .7fr) minmax(70px, .7fr); }
.fl-cols { padding: 0 18px 8px 21px; font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.fl-list { display: grid; gap: 6px; }
.fl-row { position: relative; padding: 12px 18px; border-radius: 10px; text-decoration: none; color: var(--text-1);
  background: var(--bg-2, #141517); border: 1px solid rgba(255, 255, 255, .06); border-left: 3px solid var(--mc-grass);
  transition: border-color .3s, background-color .3s, transform .3s var(--fx-ease); }
.fl-row:hover { background: #1a1b1f; border-color: rgba(255, 255, 255, .12); transform: translateX(3px); }
.fl-row.sev-warn { border-left-color: var(--mc-gold); }
.fl-row.sev-high { border-left-color: var(--mc-copper); }
.fl-row.sev-crit { border-left-color: var(--mc-redstone); }
.fl-row.off { border-left-color: rgba(255, 255, 255, .14); opacity: .72; }
.fl-row.proxy { border-left-color: var(--mc-diamond); }
.fl-name { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; min-width: 0; }
.fl-name .dot { margin: 0; }
.fl-nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fl-nm b { color: #fff; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-nm code { flex: none; font: 600 10.5px/1 var(--font-mono); letter-spacing: .06em; color: var(--text-2);
  padding: 3px 6px; border-radius: 5px; background: rgba(255, 255, 255, .06); }
.fl-name small { grid-column: 2; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-tick { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; }
.fl-tick > small { grid-column: 1 / -1; font-size: 11px; color: var(--text-3); }
.fl-big { white-space: nowrap; }
.fl-big b { font: 700 22px/1 var(--font-display); color: var(--mc-grass); }
.fl-row.sev-warn .fl-big b { color: var(--mc-gold); }
.fl-row.sev-high .fl-big b { color: var(--mc-copper); }
.fl-row.sev-crit .fl-big b { color: var(--mc-redstone); }
.fl-row.proxy .fl-big b { color: var(--mc-diamond); }
.fl-big u, .fl-heap u { text-decoration: none; font-size: 11px; color: var(--text-3); margin-left: 3px; }
.fl-spark { display: block; width: 100%; height: 30px; }
.fl-num, .fl-heap { display: grid; gap: 4px; min-width: 0; }
.fl-num b, .fl-heap > b { font: 700 16px/1 var(--font-display); color: var(--text-0); white-space: nowrap; }
.fl-num[data-col="players"] b { color: var(--mc-grass); }
.fl-num small, .fl-heap small { font-size: 11px; color: var(--text-3); }
.fl-num b .no-reading, .fl-heap b .no-reading, .fl-big .no-reading { font: 500 11px/1 var(--font-body, inherit); }
.fl-heap .fl-meter { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.fl-heap .fl-meter > i { display: block; height: 100%; border-radius: 2px; background: var(--mc-diamond); transition: width .8s var(--fx-ease); }
.fl-gone { grid-column: 2 / -1; font-size: 12.5px; color: var(--text-3); }
.fl-empty { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 22px 18px; border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, .12); color: var(--text-2); font-size: 13.5px; }
#main.fx-enter .fl-row { animation: fx-rise .5s var(--fx-ease) both; }
#main.fx-enter .fl-row:nth-child(2) { animation-delay: .03s; }
#main.fx-enter .fl-row:nth-child(3) { animation-delay: .06s; }
#main.fx-enter .fl-row:nth-child(4) { animation-delay: .09s; }
#main.fx-enter .fl-row:nth-child(5) { animation-delay: .12s; }
#main.fx-enter .fl-row:nth-child(n+6) { animation-delay: .15s; }
.fl-row .dot.beat { animation: fx-dot-beat .7s var(--fx-ease); }
@media (max-width: 900px) {
  .fl-cols { display: none; }
  .fl-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
  .fl-name, .fl-tick, .fl-gone { grid-column: 1 / -1; }
  .fl-tick { grid-template-columns: auto minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sc-seg { width: 100%; }
  .sc-seg button { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
  .fl-row { padding: 12px 14px; }
  .fl-nm code { display: none; }
}

/* --- page heads and growth --------------------------------------------------------------- */

/* A page's head: who, what, one plain sentence, and the page's own switch on the right. A grid,
   not a wrapping flex row, for the reason in the incidents section. */
.sc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 32px; margin: 4px 0 18px; }
.sc-head-copy { display: grid; gap: 6px; min-width: 0; }
.sc-head .sc-lede { max-width: 80ch; }
@media (max-width: 900px) { .sc-head { grid-template-columns: minmax(0, 1fr); } }

.gr-page { transition: opacity .25s; }
.gr-page.gr-busy { opacity: .55; }
.gr-track i { transition: width .7s var(--fx-ease); }
.gr-stack i { transition: height .7s var(--fx-ease); }
#main.fx-enter .gr-track i { transform-origin: 0 50%; animation: sc-grow-x .9s .2s var(--fx-ease) both; }
#main.fx-enter .gr-stack { transform-origin: 50% 100%; animation: sc-bar-rise .8s var(--fx-ease) both;
  animation-delay: calc(.15s + var(--i, 0) * 8ms); }
@keyframes sc-grow-x { from { transform: scaleX(0); } }

/* Figure strips on a phone: two to a row instead of one, so four figures fit on one screen
   rather than four. Values are figures, which stay short; the sub line may wrap. */
@media (max-width: 700px) {
  .grid.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid.stats .card { padding: 14px 14px 12px; }
  .grid.stats .card .value { font-size: 26px; overflow-wrap: anywhere; }
  .grid.stats .card .sub { font-size: 11px; }
}

/* --- compare and bar lists --------------------------------------------------------------- */

/* While a new selection is read the old results stay, dimmed, instead of blinking out. */
#cmp-rank, #cmp-overlay, #cmp-plugins { transition: opacity .25s; }
.cmp-busy { opacity: .45; pointer-events: none; }
/* A selected server's chip carries its line's colour in the overlay: dark, with the colour as
   its border and swatch, since the first series is grass and vanished on a grass chip. */
.btn.primary.cmp-sw { background: rgba(255, 255, 255, .06); color: #fff; border-color: var(--sw);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sw) 35%, transparent); }
.btn.primary.cmp-sw:hover { background: rgba(255, 255, 255, .1); }
.btn.cmp-sw::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 2px;
  background: var(--sw); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); vertical-align: 1px; }
/* Every shared bar list resizes rather than jumps when it is morphed, and grows in on entry. */
.lag-fill { transition: width .7s var(--fx-ease); }
#main.fx-enter .lag-fill { transform-origin: 0 50%; animation: sc-grow-x .9s .2s var(--fx-ease) both; }

/* --- players ------------------------------------------------------------------------------ */

.geo-list.geo-folded > li:nth-child(n+13) { display: none; }
.geo-more { margin-top: 10px; }
.geo-list .bar i { transition: width .7s var(--fx-ease); }
#main.fx-enter .geo-list .bar i { transform-origin: 0 50%; animation: sc-grow-x .9s .3s var(--fx-ease) both; }

/* --- less motion ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(mo-main), ::view-transition-new(mo-main) { animation: none; }
  .mo-reveal { opacity: 1; transform: none; transition: none; }
  .srv-card { transform: none; transition: none; }
  .srv-card::after { display: none; }
  #main.fx-enter canvas.srv-spark { clip-path: none; animation: none; }
  .mo-bone { animation: none; }
  #main.fx-enter .geo-list .bar i { animation: none; }
  .geo-list .bar i { transition: none; }
  #main.fx-enter .lag-fill { animation: none; }
  .lag-fill, #cmp-rank, #cmp-overlay, #cmp-plugins { transition: none; }
  #main.fx-enter .gr-track i, #main.fx-enter .gr-stack { animation: none; }
  .gr-track i, .gr-stack i, .gr-page { transition: none; }
  #main.fx-enter .fl-row, .fl-row .dot.beat { animation: none; }
  .fl-row, .fl-heap .fl-meter > i { transition: none; }
  #main.fx-enter .inc-day .stack { animation: none; }
  .inc-day { transition: none; }
  .inc-row { transition: none; }
  #main.fx-enter svg.chart path.ln { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  #main.fx-enter svg.chart path.ar { opacity: 1; animation: none; }
  .sc-hero .net-orbit-canvas { transform: none; opacity: 1; }
  #main.fx-enter .sc-side > *, #main.fx-enter .sc-stage { animation: none; }
}