/* Match UP front page: the paper desk stage.
   The hero letters are windows onto a paper cut-out desk (full.webp). Once the
   letters have opened, the same desk is shown as separate layers: the empty desk
   (base.webp) plus one cut-out per object, placed by their boxes in the
   1672x941 scene. stage.js lifts the clutter and carries it away one object at
   a time; the laptop, phone, coffee and folder stay.
   Loads after home.css and overrides its old photo-plate rules. */

/* Letters filled with the paper desk (static mode, before stage.js runs). */
.giant { background-image: url("../images/paper/desk/full.webp"); background-position: center 30%; }

/* ---------- Static (no JS or reduced motion): the desk, then the three steps ---------- */

.desk {
  max-width: calc(1100px + 2 * var(--gutter));
  margin-inline: auto;
  padding: 24px var(--gutter) clamp(64px, 8vw, 112px);
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}
.desk__frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--sw, 1672) / var(--sh, 941);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(38, 34, 32, .14), 0 18px 40px -24px rgba(38, 34, 32, .45);
}
.desk__base, .desk__obj { position: absolute; display: block; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.desk__base { inset: 0; width: 100%; height: 100%; }
.desk__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px clamp(20px, 3vw, 40px); counter-reset: step; }
.desk__steps li { display: grid; gap: 6px; padding-top: 14px; border-top: 2px solid var(--ink); }
.desk__steps h3 { font-size: var(--t-h3); }
.desk__steps p { color: var(--grey); }

/* ---------- Motion mode ---------- */
.motion .desk {
  position: absolute; inset: 0; z-index: 2;
  max-width: none; margin: 0; padding: 0; display: block;
  opacity: 0; will-change: opacity;
}
/* "cover", anchored like the window image (object-position: center 46% of the
   tallest viewport), so the layered desk lands exactly on the picture it
   replaces and stays put while a phone's toolbar resizes the pin. */
.motion .desk__frame {
  position: absolute; left: 50%; top: calc(100vh * .46); top: calc(100lvh * .46);
  width: max(100%, calc(100vh * var(--sw, 1672) / var(--sh, 941)));
  width: max(100%, calc(100lvh * var(--sw, 1672) / var(--sh, 941))); /* covers the tallest the pin gets */
  border-radius: 0; overflow: visible; box-shadow: none;
  transform: translate(-50%, -46%) scale(var(--zoom, 1));
  transform-origin: 50% 46%;
}
.motion .desk__frame::after {
  /* The desk's own edge once the camera pulls back on narrow screens. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 1px 2px rgba(38, 34, 32, .18), 0 22px 44px -26px rgba(38, 34, 32, .55);
  opacity: var(--edge, 0);
}
.motion .desk__obj { will-change: transform, opacity; transform-origin: 50% 50%; }
.motion .desk__obj.is-lifted { filter: drop-shadow(0 14px 14px rgba(38, 34, 32, .28)); }
.motion .desk__steps {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 700px) {
  .giant { background-size: auto 260%; background-position: 50% 22%; }
  .desk__steps { grid-template-columns: 1fr; }
}