/* ── deskmotion.css — Going Concern: the desk's own motion (deskmotion.js). Tokens from desk.css.
   Counting numbers, stamps on the paper, letters that unfold, an envelope on MAIL and the slow
   drift of the paintings (the drift is a Web Animation in deskmotion.js, nothing here). Every
   move is drawn over a DOM that is already right; nothing changes the layout, nothing takes a
   pointer. Off under prefers-reduced-motion and when html has .dm-off (the Living window off
   on SET, or a low battery). Loaded after every other stylesheet of the desk. */

/* ═══ 1. numbers: the real text stays in place, invisible, and the count is drawn over it ═══ */
.dm-roll{ position:relative; -webkit-text-fill-color:transparent; }
.dm-roll::after{ content:attr(data-dm-roll); content:attr(data-dm-roll) / ""; position:absolute; inset:0; padding:inherit; white-space:nowrap; text-align:inherit; -webkit-text-fill-color:currentcolor; pointer-events:none; }
td.dm-roll::after{ display:flex; align-items:center; justify-content:flex-start; }
td.r.dm-roll::after{ justify-content:flex-end; }
/* the wash: teal when the move is good, red when it is bad; a and b are the same, so a new one restarts it */
.vital .v-row{ border-radius:var(--sp-0); }
.dm-up-a{ animation:dm-up-a 620ms linear; } .dm-up-b{ animation:dm-up-b 620ms linear; }
.dm-dn-a{ animation:dm-dn-a 620ms linear; } .dm-dn-b{ animation:dm-dn-b 620ms linear; }
@keyframes dm-up-a{ 0%{ background:transparent; box-shadow:0 0 0 0 transparent; } 15%{ background:color-mix(in srgb, var(--up) 26%, transparent); box-shadow:0 0 0 var(--sp-0) color-mix(in srgb, var(--up) 26%, transparent); } 55%{ background:color-mix(in srgb, var(--up) 13%, transparent); box-shadow:0 0 0 var(--sp-0) color-mix(in srgb, var(--up) 13%, transparent); } 100%{ background:transparent; box-shadow:0 0 0 var(--sp-0) transparent; } }
@keyframes dm-up-b{ 0%{ background:transparent; box-shadow:0 0 0 0 transparent; } 15%{ background:color-mix(in srgb, var(--up) 26%, transparent); box-shadow:0 0 0 var(--sp-0) color-mix(in srgb, var(--up) 26%, transparent); } 55%{ background:color-mix(in srgb, var(--up) 13%, transparent); box-shadow:0 0 0 var(--sp-0) color-mix(in srgb, var(--up) 13%, transparent); } 100%{ background:transparent; box-shadow:0 0 0 var(--sp-0) transparent; } }
@keyframes dm-dn-a{ 0%{ background:transparent; box-shadow:0 0 0 0 transparent; } 15%{ background:color-mix(in srgb, var(--down) 28%, transparent); box-shadow:0 0 0 var(--sp-0) color-mix(in srgb, var(--down) 28%, transparent); } 55%{ background:color-mix(in srgb, var(--down) 14%, transparent); box-shadow:0 0 0 var(--sp-0) color-mix(in srgb, var(--down) 14%, transparent); } 100%{ background:transparent; box-shadow:0 0 0 var(--sp-0) transparent; } }
@keyframes dm-dn-b{ 0%{ background:transparent; box-shadow:0 0 0 0 transparent; } 15%{ background:color-mix(in srgb, var(--down) 28%, transparent); box-shadow:0 0 0 var(--sp-0) color-mix(in srgb, var(--down) 28%, transparent); } 55%{ background:color-mix(in srgb, var(--down) 14%, transparent); box-shadow:0 0 0 var(--sp-0) color-mix(in srgb, var(--down) 14%, transparent); } 100%{ background:transparent; box-shadow:0 0 0 var(--sp-0) transparent; } }

/* ═══ 2. stamps: a copy of the paper over the desk, stamped, then gone ═══ */
.dm-ghost{ position:fixed; z-index:650; margin:0; box-sizing:border-box; pointer-events:none; contain:layout style; }
.pane .winbody.dm-ghost{ flex:none; min-height:0; overflow:visible; padding:0; }
/* a copy of a row, a card or a letter carries three layers of the pane's glass, so the desk redrawn under it does not show through */
.dm-ghost.dm-solid{ background:linear-gradient(var(--bg), var(--bg)), linear-gradient(var(--bg), var(--bg)), var(--gc-tw-bg, var(--bg)); border-radius:var(--sp-1); box-shadow:var(--shadow-float); }
.dm-ghost > .victory-box{ box-shadow:var(--shadow-lift); }
.dm-ghost.dm-leave-ok{ animation:dm-leave-ok 300ms cubic-bezier(.5,0,.8,.4) 640ms both; }
.dm-ghost.dm-leave-no{ animation:dm-leave-no 300ms cubic-bezier(.5,0,.8,.4) 640ms both; }
.dm-ghost.dm-small.dm-leave-ok, .dm-ghost.dm-small.dm-leave-no{ animation-name:dm-leave-side; }
@keyframes dm-leave-ok{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translate(calc(28 * var(--u)), calc(-10 * var(--u))) rotate(1deg); } }
@keyframes dm-leave-no{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(calc(24 * var(--u))); } }
@keyframes dm-leave-side{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateX(calc(48 * var(--u))); } }

.dm-stamp{ --dm-ink:var(--accent); position:absolute; left:50%; top:var(--dm-cy, 50%); z-index:2; transform:translate(-50%, -50%) rotate(var(--dm-rot, -7deg));
  font:600 var(--fs-7)/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; color:var(--dm-ink);
  border:var(--sp-0) solid var(--dm-ink); border-radius:var(--sp-1); padding:var(--sp-1h) var(--sp-3) var(--sp-1h) var(--sp-4);
  background:color-mix(in srgb, var(--dm-ink) 8%, transparent);
  animation:dm-press 170ms cubic-bezier(.2,.7,.3,1) both; }
.dm-stamp.dm-ink-no{ --dm-ink:var(--down); }
.dm-stamp.dm-on-paper{ --dm-ink:var(--ink-accent); mix-blend-mode:multiply; }
.dm-stamp.dm-on-paper.dm-ink-no{ --dm-ink:var(--ink-down); }
.dm-big .dm-stamp{ font-size:var(--fs-8); border-width:3px; padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-5); }
.dm-small .dm-stamp{ font-size:var(--fs-3); letter-spacing:.18em; border-width:var(--sp-px); padding:var(--sp-0) var(--sp-1h) var(--sp-0) var(--sp-2); }
/* the ink spreads from the impact and settles */
.dm-stamp::before{ content:''; position:absolute; inset:calc(-1 * var(--sp-2)); border-radius:var(--sp-2); background:radial-gradient(closest-side, color-mix(in srgb, var(--dm-ink) 34%, transparent), transparent); opacity:0; animation:dm-ink 420ms ease-out 110ms both; }
@keyframes dm-press{
  0%{ opacity:0; transform:translate(-50%, -50%) rotate(var(--dm-rot, -7deg)) scale(1.7); filter:blur(var(--sp-px)); }
  60%{ opacity:1; transform:translate(-50%, -50%) rotate(var(--dm-rot, -7deg)) scale(.96); filter:none; }
  100%{ opacity:1; transform:translate(-50%, -50%) rotate(var(--dm-rot, -7deg)) scale(1); filter:none; }
}
@keyframes dm-ink{ 0%{ opacity:.9; transform:scale(.6); } 100%{ opacity:0; transform:scale(1.45); } }

/* ═══ 3. letters: the paper unfolds from its top edge ═══ */
.dm-unfold{ transform-origin:50% 0; animation:dm-unfold 300ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes dm-unfold{
  from{ opacity:0; transform:perspective(calc(900 * var(--u))) rotateX(-9deg) translateY(calc(-6 * var(--u))); clip-path:inset(0 0 55% 0); }
  to{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }
}
/* a new letter: a small envelope drops onto MAIL and the DESK department, and fades */
#fn-bar .dm-env-on{ position:relative; }
.dm-env{ position:absolute; top:calc(-1 * var(--sp-1h)); right:calc(-1 * var(--sp-1)); width:calc(14 * var(--u)); height:calc(11 * var(--u)); padding:var(--sp-px); box-sizing:border-box;
  color:var(--accent); background:var(--gc-tw-bg, var(--bg)); border-radius:var(--sp-0); line-height:0; pointer-events:none; animation:dm-env 1800ms ease-out both; }
.dm-env svg{ display:block; width:100%; height:100%; }
@keyframes dm-env{ 0%{ opacity:0; transform:translateY(calc(-6 * var(--u))); } 14%{ opacity:1; transform:none; } 78%{ opacity:1; transform:none; } 100%{ opacity:0; transform:none; } }

/* ═══ off: the Living window switched off, a low battery, or a device that asks for reduced motion ═══ */
html.dm-off .dm-roll{ -webkit-text-fill-color:currentcolor; }
html.dm-off .dm-roll::after{ content:none; }
html.dm-off :is(.dm-ghost, .dm-env){ display:none; }
html.dm-off :is(.dm-unfold, .dm-up-a, .dm-up-b, .dm-dn-a, .dm-dn-b){ animation:none; }
@media (prefers-reduced-motion: reduce){
  .dm-roll{ -webkit-text-fill-color:currentcolor; }
  .dm-roll::after{ content:none; }
  .dm-ghost, .dm-env{ display:none; }
  .dm-unfold, .dm-up-a, .dm-up-b, .dm-dn-a, .dm-dn-b, .dm-stamp, .dm-stamp::before{ animation:none; }
}