/* ── motion.css — Going Concern: motion, and the loading, empty and error states.
   Every transition is 180ms or shorter and goes away under prefers-reduced-motion.
   Nothing here delays the DOM: motion.js adds a class after the content is in
   place, and the class only animates what is already there. Tokens from desk.css. */

/* ═══ motion ═══ */
/* pane content when the function in a pane changes: a 6px rise and a cross-fade */
.winbody.gc-in{ animation:gc-in 160ms ease-out; }
@keyframes gc-in{ from{ opacity:0; transform:translateY(var(--sp-1h)); } to{ opacity:1; transform:none; } }
/* a card arriving in the queue */
.qi.gc-arrive{ animation:gc-arrive 180ms ease-out; }
@keyframes gc-arrive{ from{ opacity:0; transform:translateX(calc(-1 * var(--sp-1h))); } to{ opacity:1; transform:none; } }
/* a vital in the strip whose number has just changed */
.vital.gc-tick .v-val{ animation:gc-tick 180ms ease-out; }
@keyframes gc-tick{ 0%{ color:var(--accent); } 100%{ } }
.vital.gc-tick{ animation:gc-tick-bg 180ms ease-out; }
@keyframes gc-tick-bg{ 0%{ background:var(--panel-2); } 100%{ background:transparent; } }
/* the rail when the lesson or the goal changes */
#guide.gc-change{ animation:gc-in 180ms ease-out; }
#tb-goal.gc-change{ animation:gc-fade 180ms ease-out; }
@keyframes gc-fade{ from{ opacity:0; } to{ opacity:1; } }
/* the focus moving between the panes */
.pane-head .ph-code{ transition:color 160ms ease-out; }
.pane-head{ transition:border-bottom-color 160ms ease-out; }
.pane-head.gc-focus{ animation:gc-focus 180ms ease-out; }
@keyframes gc-focus{ 0%{ background:var(--panel-2); } 100%{ background:var(--panel); } }
/* the handbook turning to an article: a thin rule sweeps the head of the page */
.hb-article.gc-turn{ position:relative; animation:gc-fade 160ms ease-out; }
.hb-article.gc-turn::before{ content:''; position:absolute; left:0; top:0; height:var(--sp-0); width:0; background:var(--ink); animation:gc-turn 160ms ease-out forwards; }
@keyframes gc-turn{ from{ width:0; opacity:1; } 80%{ width:100%; opacity:1; } to{ width:100%; opacity:0; } }

/* ═══ taking office: between the appointment letter and the desk ═══ */
#gc-office{ position:fixed; inset:0; z-index:800; background:var(--bg); display:flex; align-items:center; justify-content:center; font-family:var(--mono); color:var(--muted); }
#gc-office.out{ animation:gc-out 150ms ease-in forwards; }
@keyframes gc-out{ to{ opacity:0; } }
.gc-office-in{ text-align:center; }
.gc-office-k{ font-size:var(--fs-2); letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.gc-office-bank{ font:600 var(--fs-7)/1.2 var(--sans); color:var(--text); margin:var(--sp-2h) 0 var(--sp-1h); }
.gc-office-who{ font-size:var(--fs-2); letter-spacing:.08em; color:var(--muted); }
.gc-office-bar{ width:calc(160 * var(--u)); height:var(--sp-0); background:var(--line); margin:var(--sp-4) auto 0; overflow:hidden; }
.gc-office-bar i{ display:block; height:100%; width:0; background:var(--accent); animation:gc-office-bar 340ms linear forwards; }
@keyframes gc-office-bar{ to{ width:100%; } }

/* ═══ the empty state: a muted line in the house voice ═══ */
.gc-empty{ font:var(--fs-3)/var(--lh-3) var(--sans); color:var(--dim); padding:var(--sp-1h) 0 var(--sp-1h) var(--sp-2h); border-left:2px solid var(--line-2); margin:var(--sp-1) 0; }
.gc-empty b{ color:var(--muted); font-weight:500; }
.winbody table tr.gc-empty-row td{ color:var(--dim); font-family:var(--sans); font-size:var(--fs-3); padding:var(--sp-2) var(--sp-1h); border-bottom:0; }
.mail-list .gc-empty{ margin:var(--sp-2); }

/* ═══ the error state: inside the pane, the rest of the desk untouched ═══ */
.gc-error{ padding:var(--sp-3h) 0; font-family:var(--sans); }
.gc-error .gc-err-code{ font:600 var(--fs-2) var(--mono); letter-spacing:.14em; color:var(--down); text-transform:uppercase; }
.gc-error .gc-err-msg{ font-size:var(--fs-4); color:var(--text); margin:var(--sp-1h) 0 var(--sp-2h); }
.gc-error pre{ font:var(--fs-2)/var(--lh-3) var(--mono); color:var(--muted); background:var(--panel); border:1px solid var(--line); padding:var(--sp-2) var(--sp-2h); margin:0 0 var(--sp-3); white-space:pre-wrap; word-break:break-word; max-height:calc(160 * var(--u)); overflow:auto; }
.gc-error .gc-err-rest{ font-size:var(--fs-2); color:var(--muted); margin-top:var(--sp-2h); }

/* ═══ reduced motion: none of it ═══ */
@media (prefers-reduced-motion: reduce){
  .winbody.gc-in, .qi.gc-arrive, .vital.gc-tick, .vital.gc-tick .v-val, #guide.gc-change, #tb-goal.gc-change, .pane-head.gc-focus, .hb-article.gc-turn, #gc-office.out, .gc-office-bar i{ animation:none; }
  .hb-article.gc-turn::before{ display:none; }
  .pane-head, .pane-head .ph-code{ transition:none; }
  .gc-office-bar i{ width:100%; }
}