/* The workbench: a true perspective plane so the wood grain recedes toward the wall. */

.desk {
  /* bleeds past the stage on both sides so the perspective flare is never clipped */
  left: -800px;
  top: 588px;
  width: calc(var(--stage-w) + 1600px);
  height: 900px;
  perspective: 900px;
  perspective-origin: 50% 0;
  overflow: hidden;
}

.desk__top {
  position: absolute;
  left: 860px;
  top: 0;
  width: 1480px;
  height: 760px;
  transform-origin: 50% 0;
  transform: rotateX(62deg);
  background:
    /* back edge darkens where it meets the wall */
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 12%),
    /* soft falloff toward the sides */
    linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 25%, transparent 75%, rgba(0, 0, 0, .35)),
    /* real wood (Poly Haven "Wood Table 001", CC0), grain rotated to run along the desk */
    url("../assets/textures/wood-desk.webp") 0 0 / 760px,
    var(--wood-2);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .5);
}

/* Contact shadow where the desk meets the wall. */
.desk__wall-shadow {
  position: absolute;
  left: 840px;
  width: 1520px;
  top: -14px;
  height: 30px;
  background: radial-gradient(ellipse at 50% 0, rgba(0, 0, 0, .65), transparent 70%);
  filter: blur(4px);
}

/* Items layer sits over the desk in flat stage coordinates. No z-index, so items join the
   stage's stacking context and emissive ones (the hologram) can rise above the room shade. */
.desk-items {
  inset: 0;
  pointer-events: none;
}

/* ---------- WebGL workbench (js/desk3d) ---------- */

/* Below the item proxies and the room's light/shade overlays; above the window and wall. */
.desk3d {
  z-index: 15;
  pointer-events: none;
  animation: desk3d-in .6s var(--ease-out);
}
.desk3d canvas { display: block; }
@keyframes desk3d-in { from { opacity: 0; } }

.has-desk3d .desk__top,
.has-desk3d .desk__wall-shadow { visibility: hidden; }
/* Items drawn in 3D keep their (invisible) button as a focus/HUD proxy. */
.item.is-3d:not(.keep-dom) > *,
.item--hologram.is-3d .holo__base { visibility: hidden; }
#stage.is-desk-hover { cursor: pointer; }

/* The 3D lamp lights the desk itself; keep only the CSS glow it throws on the wall. */
.has-desk3d .lamp-glow {
  background: radial-gradient(ellipse 320px 240px at 330px 430px, rgba(255, 196, 120, .14), transparent 70%);
}