/* The desk beside the phone: a sheet of glass with real things on it. Scoped under .desk (the phone's app.css shares names). */
.side .desk { position: relative; width: 360px; height: 470px; display: block; --ink: #24337a; --pen-red: #c7352b; }
.desk .slab { position: absolute; inset: 0; --r: 34px; border-radius: 34px; }
.desk .hd { position: absolute; left: 28px; top: 20px; font: 600 29px/1 "Caveat", var(--serif); color: var(--ink); letter-spacing: 0.005em; transform: rotate(-1.5deg); }

/* Everything on it lands softly; a print that is moved slides there, turning a little. */
@property --r { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.desk .it { position: absolute; display: block; opacity: 0; transform: translateY(-10px) rotate(var(--r)) scale(1.035);
  transition: opacity 0.55s ease var(--d), transform 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d), filter 0.9s ease,
    left 1.15s cubic-bezier(0.3, 0.7, 0.2, 1) var(--d), top 1.15s cubic-bezier(0.3, 0.7, 0.2, 1) var(--d), --r 1.15s cubic-bezier(0.3, 0.7, 0.2, 1) var(--d); }
.desk .it.on { opacity: var(--a, 1); transform: rotate(var(--r)); }
/* Pen: written left to right, a moment after the thing it is about. */
.desk .ink, .desk .tx { opacity: 1; transform: rotate(var(--r)); clip-path: inset(-30% 101% -30% -30%);
  transition: clip-path 1.05s cubic-bezier(0.45, 0.05, 0.3, 1) calc(var(--d) + 0.35s); }
.desk .ink.on, .desk .tx.on { clip-path: inset(-30% -30% -30% -30%); }
.desk .it.dim { opacity: 0.5; filter: saturate(0.25) brightness(1.06); }

/* A photo, printed. A pile when there are copies. */
.desk .pr .pfr, .desk .pr .cp { display: block; padding: 5px; background: #fbfaf6; border-radius: 1.5px;
  box-shadow: 0 0.5px 1px rgb(25 35 70 / 0.22), 0 7px 16px -6px rgb(25 35 70 / 0.34); }
.desk .pr .pfr { position: relative; }
.desk .pr .pfr::after { content: ""; position: absolute; inset: 5px; background: linear-gradient(128deg, rgb(255 255 255 / 0.2), transparent 38%); pointer-events: none; }
.desk .pr .cp { position: absolute; inset: 0; transform: translate(calc(var(--i) * 5px), calc(var(--i) * -5px)) rotate(calc(var(--i) * 2.2deg)); }
/* Copies that turn up later slide out from under the print. */
.desk .pr[data-pile] .cp { opacity: 0; transform: none; transition: opacity 0.4s ease calc(var(--d) + var(--i) * 0.16s), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--d) + var(--i) * 0.16s); }
.desk .pr[data-pile].piled .cp { opacity: 1; transform: translate(calc(var(--i) * 5px), calc(var(--i) * -5px)) rotate(calc(var(--i) * 2.2deg)); }
.desk .pr img { display: block; width: 100%; aspect-ratio: 900 / 669; object-fit: cover; }
.desk .pr.tall img { aspect-ratio: auto; }

/* Objects: real, so they cast a little shadow. */
.desk .ob { height: auto; filter: drop-shadow(0 5px 7px rgb(25 35 70 / 0.24)) drop-shadow(0 1px 1px rgb(25 35 70 / 0.18)); }
.desk .ob.stc { filter: drop-shadow(0 6px 10px rgb(25 35 70 / 0.3)) drop-shadow(0 1px 1.5px rgb(25 35 70 / 0.25)); }
.desk .ink { height: auto; mix-blend-mode: multiply; opacity: 0.92; }

/* Handwriting, in the same pen. */
.desk .tx { font: 500 21px/1.02 "Caveat", var(--serif); color: var(--ink); }
.desk .tx.big { font-size: 25px; font-weight: 600; }
.desk .tx.red { color: var(--pen-red); }
.desk .tx.tg { font-size: 20px; font-weight: 600; color: #3a2a1a; }
.desk .tx.tg.sm { font-size: 17px; color: var(--ink); }

/* A boarding pass, printed; the pen goes on top. */
.desk .ps img { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 8px rgb(25 35 70 / 0.22)) drop-shadow(0 1px 1px rgb(25 35 70 / 0.16)); }
.desk .ps .pa { position: absolute; left: 7%; top: 15%; font-family: var(--sans); color: #1d2747; }
.desk .ps small { display: block; font: 600 10.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #6b7590; }
.desk .ps .pa b { display: block; margin-top: 8px; font: 700 27px/1 var(--sans); letter-spacing: 0.02em; }
.desk .ps .pa b i { font-style: normal; font-weight: 500; color: #8a93ab; }
.desk .ps .pa em { position: relative; display: block; margin-top: 9px; font: 500 13px/1 var(--sans); font-style: normal; color: #4a5470; }
.desk .ps .ot { position: relative; display: inline-block; font-weight: 700; color: #1d2747; }
.desk .ps .ot .ink { left: -3px; top: 3px; width: calc(100% + 6px); }
.desk .ps .nt { position: absolute; left: calc(100% + 6px); top: -9px; width: 64px; --r: -4deg; }
.desk .ps .pb { position: absolute; left: 81.5%; top: 15%; width: 16%; text-align: center; }
.desk .ps .pb b { display: block; margin-top: 8px; font: 700 19px/1 var(--sans); color: #1d2747; }
.desk .ps .tk { left: 50%; top: 34px; width: 30px; margin-left: -12px; }