/* PUBLIC-SHELL-DOORS-20261020 §25.4 / §26.3 / §27.3 — decorative cover layers.

   Owner: js/ui/door-transition.js. This file only paints the nodes that module
   creates; it adds no behaviour, no route knowledge and no second palette. Every
   opaque colour below is a tokens.css variable or a variable the module itself
   sets inline. Only black/white alpha is used for shading.

   JS node -> CSS selector map (mirrors buildDoorScene / buildLeaf / buildTurnScene)
     #pm-door-layer.pm-door-layer            fixed cover host, [hidden] while idle
       .pm-door[data-profile="door"]         one door scene
         .pm-door__camera                    scaled by the 680ms camera track
           .pm-door__surround                full-viewport wall with a real hole
           .pm-door__box                     inline left/top/width/height
             .pm-door__cast                  fixed shadow of the opening (sibling
                                             of the leaves, never rotated)
             .pm-door__leaf--left            rotateY 0/30/60/90/106deg (580ms,
                                             five fixed stops, 30/60/90 pinned)
             .pm-door__leaf--right           same stops, negative
             .pm-door__leaf--whole/--single  same stops, single-leaf doors
               .pm-door__face                front plane  z=+4px
               .pm-door__back                rear plane   z=-10px
               .pm-door__edge--free          sawn leading edge, 12.6px thick,
                                             anchored on the front plane
               .pm-door__edge--hinge         hinge-side edge, 12.6px thick
               .pm-door__hardware            handles + hinges, z=+13px
               .pm-door__shade               darkening plane, JS opacity track
             .pm-door__frame                 fixed casing, z=+19px, never rotates
           .pm-door__plaque                  small label below the door
       .pm-door[data-profile="page-turn"]
         .pm-turn                           540ms sheet, --pm-turn-paper/board
           .pm-turn__board                  lower board + binding groove
           .pm-turn__leaf                   binding axis, rotateY 0 -> -89 -> -178
             .pm-turn__face--front          recto
             .pm-turn__face--back           verso
             .pm-turn__edge                 2px paper side
           .pm-turn__shadow                 shadow the sheet drops on the board
       .pm-door[data-quiet="true"]          reduced-motion / no-WAAPI branch

   Timing is owned by the module (TIMING in door-transition.js). The mirror below
   is documentation and is only consumed by the two CSS-only decorations (plaque
   fade, sheet glint); nothing here transitions a property the module animates.
     cover 100ms | leaf 580ms, five stops at 0/180/340/470/580ms
                  (30°/60°/90° land at 280/440/570ms) | camera 680ms
     total 780ms (< 800ms cap) | turn 540ms (270 + 270) | light 200ms | quiet 80ms

   3-D rules: .pm-door__box / .pm-door__leaf / .pm-turn carry preserve-3d, and no
   filter, clip-path, backdrop-filter, mask or opacity < 1 is ever put on one of
   those three (a grouping property there would flatten the leaf into a card).
   The module fades opacity on .pm-door and .pm-turn__board, which are plain
   grouping ancestors outside the preserve-3d context, and only while the leaf is
   still closed (leaf delay == cover 100ms), so no rotation is ever flattened. */

.pm-door-layer {
  /* Mirror of the module's timeline; see the header table. */
  --pm-door-cover: 100ms;
  --pm-door-leaf: 580ms;
  --pm-door-camera: 680ms;
  --pm-door-turn: 540ms;
  --pm-door-quiet: 80ms;
  --pm-door-ease-leaf: cubic-bezier(.24, .65, .18, 1);
  --pm-door-ease-camera: cubic-bezier(.5, 0, .18, 1);

  position: fixed;
  inset: 0;
  z-index: 60; /* above the 50 fog and the header, below the 70 skip link */
  overflow: hidden;
  pointer-events: none; /* inherited by the whole scene: it is decoration only */
  user-select: none;
  contain: layout style;
}

/* The host stays in the document between runs; the attribute is the switch. */
.pm-door-layer[hidden] {
  display: none;
}

/* .pm-door is also the class of the dream scene's tiny 36px room doors
   (styles/pages/dream.css). Keep this absolute full-bleed box inside our own
   cover host so it can never apply to those. */
#pm-door-layer .pm-door {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --------------------------------- door scene -------------------------------- */

.pm-door__camera {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  will-change: transform;
}

.pm-door__surround {
  position: absolute;
  inset: 0;
}

/* The SVG roots keep their default overflow:hidden on purpose. leafSvg() gives a
   half leaf the viewBox '0 0 210 700' / '210 0 210 700' while drawing the whole
   420-unit door, so the clip is what splits the leaf at the meeting stile. */
.pm-door__surround svg,
.pm-door__box svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The opening. Its inline left/top/width/height come from boxFor() in the module
   and are re-measured on every run, so nothing here hard-codes a door size. */
.pm-door__box {
  position: absolute;
  transform-style: preserve-3d;
  perspective: 1100px;
  perspective-origin: 50% 50%;
}

/* Shadow of the opening: a fixed sibling of the leaves inside the box, pushed
   behind the panel plane. It never rotates, so it stays aligned to the jamb
   while both leaves turn. */
.pm-door__cast {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .46;
  transform: translateZ(-12px);
  transform-origin: 0 50%;
}

/* One solid body: front, back, two sides and hardware share this hinge parent. */
.pm-door__leaf {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  backface-visibility: visible;
  will-change: transform;
}

.pm-door__leaf--right {
  left: 50%;
  transform-origin: 100% 50%;
}

/* A single-leaf door (door.mechanism === 'single', e.g. 说明) spans the box. */
.pm-door__leaf--whole,
.pm-door__leaf--single {
  width: 100%;
  transform-origin: 0 50%;
}

.pm-door__face,
.pm-door__back,
.pm-door__hardware,
.pm-door__shade {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

/* Front plane of the 14px body. */
.pm-door__face { transform: translateZ(4px); }

/* Rear plane of the same body: turned round, then pushed back to z = -10px, the
   other face of the 14px slab that starts at z = +4px. */
.pm-door__back { transform: rotateY(180deg) translateZ(10px); }

/* Handles and hinges sit proud of the front plane. */
.pm-door__hardware { transform: translateZ(13px); }

/* Darkening plane in front of the front face; the module drives its opacity. */
.pm-door__shade {
  transform: translateZ(5px);
  opacity: 0;
}

/* Side thickness. --pm-door-depth is set inline by the module (EDGE_DEPTH = 14px)
   and is intentionally not scaled with the box: the module keeps the slab 14px
   thick at every viewport, so the moulding reads as real timber, not as a card.

   The strip starts on the front plane (z = +4px) and extends 14px towards the
   viewer, so it stands as the sawn leading edge of the slab that the two faces
   (front z = +4, rear z = -10) close. Vertical extent stays inside 6%/88% so
   that on all ten silhouettes the side face is hidden by the fixed casing (the
   casing strokes in frame() cover the outer 4% of the panel).

   Why not translateZ(-10px) (the rear plane): measured in Edge, a strip lying
   between the two face planes projects *inside* the rear face's silhouette at
   every angle, so it disappears — the thickness layer was effectively missing.
   Anchoring it on the front plane puts the 14px section outside the silhouette
   at 30°/60°, exactly where the eye expects the cut edge.

   断面是一块锯口，不是一条黑缝：30° 时投影只有 6–7px，所以底色用模块抬过一
   档的 --pm-door-edge-colour 铺满整条，只在两端各压暗 16% 并加一道很窄的受光
   冠（12% 白）。灰度下它落在门扇面与框料之间，不会退成阴影。 */
.pm-door__edge {
  position: absolute;
  top: 6%;
  width: var(--pm-door-depth, 14px);
  height: 88%;
  transform: translateZ(4px) rotateY(-90deg);
  transform-origin: 0 50%;
  background:
    linear-gradient(
      90deg,
      transparent 20%,
      rgb(255 247 226 / .12) 42%,
      rgb(255 247 226 / .04) 64%,
      transparent 86%
    ),
    linear-gradient(
      90deg,
      rgb(0 0 0 / .42) 0,
      rgb(0 0 0 / 0) 16%,
      rgb(0 0 0 / 0) 84%,
      rgb(0 0 0 / .48) 100%
    ),
    linear-gradient(90deg, var(--pm-door-edge-colour, var(--pm-ink)) 0 100%);
  box-shadow:
    inset 0 1px rgb(255 250 236 / .4),
    inset 0 -2px rgb(0 0 0 / .55);
}

/* Free edge of a half leaf: the leaf ends exactly on the meeting stile, because
   leafSvg() crops '0 0 210 700' / '210 0 210 700' and scales the panel by .90
   about its own centre, which puts the panel edge on 100% of the leaf. */
.pm-door__edge--free { left: 100%; }

.pm-door__leaf--right .pm-door__edge--free { left: 0; }

/* Single-leaf doors use the full '0 0 420 700' viewBox, so the same .90 inset
   puts the panel edge on 5% / 95% of the leaf instead of 10% / 100%. */
.pm-door__leaf--whole .pm-door__edge--free,
.pm-door__leaf--single .pm-door__edge--free { left: 95%; }

.pm-door__leaf--whole .pm-door__edge--hinge,
.pm-door__leaf--single .pm-door__edge--hinge { left: 5%; }

/* Hinge-side thickness: the panel starts 10% inside the hinge axis of a half
   leaf (21 of 210 units after the .90 inset). */
.pm-door__edge--hinge {
  top: 36%;
  left: 10%;
  height: 58%;
}

.pm-door__leaf--right .pm-door__edge--hinge { left: 90%; }

/* Fixed casing, front jamb, metal lip, reveal stop and threshold are drawn by
   frame() in the module; this only places the layer and keeps it in front of the
   leaves without joining their rotation. */
.pm-door__frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  transform: translateZ(19px);
}

.pm-door__plaque {
  position: absolute;
  bottom: 4.5%;
  left: 50%;
  padding: var(--pm-s-1) var(--pm-s-4);
  transform: translateX(-50%) translateZ(22px);
  color: var(--pm-brass-hi);
  background: rgb(0 0 0 / .68);
  border: var(--pm-w-hair) solid var(--pm-brass);
  border-radius: var(--pm-r-sm);
  font: 600 var(--pm-fs-sm)/1.3 var(--pm-font-serif);
  letter-spacing: .08em;
  white-space: nowrap;
  animation: pm-door-plaque-in var(--pm-door-cover) linear 1 both;
}

/* The label arrives with the cover, not with the leaf. */
@keyframes pm-door-plaque-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* -------------------------------- page turn ---------------------------------- */

.pm-turn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(72vw, 720px);
  height: min(64vh, 520px);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

/* Lower board. JS sets --pm-turn-paper and --pm-turn-board inline; the two
   pseudo-elements add the binding groove and the gilt edge of the book block. */
.pm-turn__board {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(255 250 236 / .10), transparent 42%),
    linear-gradient(180deg, var(--pm-turn-board, var(--pm-ink)), rgb(0 0 0 / .35));
  border-radius: var(--pm-r-sm) var(--pm-r-sheet) var(--pm-r-sheet) var(--pm-r-sm);
  box-shadow:
    inset 0 0 0 1px var(--pm-brass),
    inset 22px 0 26px -20px rgb(0 0 0 / .55),
    0 8px 22px -8px rgb(0 0 0 / .55);
}

/* Binding groove down the spine, under the sheet. */
.pm-turn__board::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 26px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(0 0 0 / .58), rgb(0 0 0 / .16) 62%, transparent);
}

/* Gilt hairlines of the book block, above the groove. */
.pm-turn__board::after {
  content: "";
  position: absolute;
  inset: 6px auto 6px 22px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--pm-brass), transparent);
  opacity: .55;
}

/* The binding axis is the left edge: the module turns 0 -> -89 -> -178deg here. */
.pm-turn__leaf {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

.pm-turn__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--pm-r-sm) 10px 10px var(--pm-r-sm);
  background-color: var(--pm-turn-paper, var(--pm-paper));
  background-image: repeating-linear-gradient(
    180deg,
    rgb(0 0 0 / .045) 0 1px,
    transparent 1px 34px
  );
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / .08),
    inset 30px 0 34px -26px rgb(0 0 0 / .45),
    inset 0 -2px 0 rgb(255 255 255 / .4);
  backface-visibility: hidden;
}

/* Recto, with the one light pass of the turn (540ms, same span as the leaf). */
.pm-turn__face--front::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgb(255 255 255 / .42) 50%, transparent 66%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: pm-turn-glint var(--pm-door-turn) linear 1 both;
}

@keyframes pm-turn-glint {
  from { background-position: 150% 0; }
  to { background-position: -60% 0; }
}

/* Corner of the sheet that lifts first: a small curl, drawn on the recto so it
   travels with the paper. */
.pm-turn__face--front::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46px;
  height: 46px;
  border-radius: 0 0 10px 0;
  background:
    linear-gradient(315deg, transparent 46%, rgb(0 0 0 / .18) 50%, transparent 54%),
    linear-gradient(315deg, var(--pm-turn-paper, var(--pm-paper)) 0 48%, var(--pm-line) 48% 50%, var(--pm-card) 50% 100%);
  box-shadow: -6px -6px 10px -6px rgb(0 0 0 / .35);
}

/* Verso of the same sheet. */
.pm-turn__face--back {
  transform: rotateY(180deg);
  background-image: repeating-linear-gradient(
    180deg,
    rgb(0 0 0 / .035) 0 1px,
    transparent 1px 34px
  );
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / .08),
    inset -30px 0 34px -26px rgb(0 0 0 / .45),
    inset 0 2px 0 rgb(255 255 255 / .35);
}

/* 2px paper side so the sheet reads as paper and not as a screen. */
.pm-turn__edge {
  position: absolute;
  top: 6px;
  right: -1px;
  width: 2px;
  height: calc(100% - 12px);
  transform: translateZ(-1px);
  background: linear-gradient(180deg, var(--pm-card), var(--pm-line) 62%, var(--pm-ink-2));
  opacity: .85;
}

/* The shadow the sheet drops on the board; the module drives the opacity curve. */
.pm-turn__shadow {
  position: absolute;
  inset: 0;
  border-radius: var(--pm-r-sm) var(--pm-r-sheet) var(--pm-r-sheet) var(--pm-r-sm);
  background: radial-gradient(120% 84% at 0 50%, rgb(0 0 0 / .5), transparent 62%);
  opacity: .38;
}

/* --------------------------- reduced-motion branch --------------------------- */

/* The module already skips rotation, zoom and the light pass here (runQuiet).
   These rules only strip the 3-D scaffolding and the two CSS decorations so the
   quiet scene is a static closed door / a static sheet. */
.pm-door[data-quiet="true"] .pm-door__camera,
.pm-door[data-quiet="true"] .pm-door__box,
.pm-door[data-quiet="true"] .pm-turn {
  perspective: none;
}

.pm-door[data-quiet="true"] .pm-door__leaf,
.pm-door[data-quiet="true"] .pm-turn__leaf,
.pm-door[data-quiet="true"] .pm-door__camera {
  will-change: auto;
}

.pm-door[data-quiet="true"] .pm-door__plaque,
.pm-door[data-quiet="true"] .pm-turn__face--front::before,
.pm-door[data-quiet="true"] .pm-turn__face--front::after {
  animation: none;
}

/* Quiet scenes keep a flat, legible silhouette: no cast shadow, no glint. */
.pm-door[data-quiet="true"] .pm-door__cast,
.pm-door[data-quiet="true"] .pm-door__shade {
  opacity: .18;
}

html.pm-motion-off .pm-door__camera,
html.pm-motion-off .pm-door__leaf,
html.pm-motion-off .pm-turn,
html.pm-motion-off .pm-turn__leaf {
  will-change: auto;
}

html.pm-motion-off .pm-door__plaque,
html.pm-motion-off .pm-turn__face--front::before,
html.pm-motion-off .pm-turn__face--front::after {
  animation: none;
}

html.pm-motion-off .pm-turn__leaf {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .pm-door__camera,
  .pm-door__leaf,
  .pm-turn,
  .pm-turn__leaf {
    will-change: auto;
  }

  .pm-door__plaque,
  .pm-turn__face--front::before,
  .pm-turn__face--front::after {
    animation: none;
  }

  .pm-turn__leaf {
    transform: none;
  }

  .pm-door__shade,
  .pm-door__cast {
    opacity: .18;
  }
}

/* Narrow screens: the module already sizes the door from the stage; these only
   keep the label and the sheet inside the 390px reference width. */
@media (max-width: 599px) {
  .pm-door__plaque {
    padding: 2px var(--pm-s-3);
    font-size: var(--pm-fs-micro);
  }

  .pm-turn {
    width: min(84vw, 720px);
    height: min(56vh, 520px);
  }
}

/* ---------------------------- detail entries ----------------------------

   §28.5: three shapes for column -> item. They are painted inside the same
   #pm-door-layer but under their own root, .pm-detail, so the door/quiet/
   page-turn selectors above never see them.

     .pm-detail[data-profile="detail"][data-detail="mirror"]  780ms
       .pm-detail__veil      the list dims to .7 (0-260ms)
       .pm-detail__frame     inline left/top/width/height from the card, brass
                             edge; grows to the middle of the viewport
         .pm-detail__glass   the card's cover, or .pm-detail__silver
       .pm-detail__mask      silver that closes over the glass (260-520ms)
     .pm-detail[data-detail="seal"]      700ms
       .pm-detail__seal      square face, lifted 12px, then struck at 340ms
       .pm-detail__paper     #EFE7D6 disc spread from the seal face
       .pm-detail__ink       #8C3A2E burst through the same point
     .pm-detail[data-detail="drawer"]    740ms
       .pm-detail__cabinet   start rect, brightness .85 -> 1.12
         .pm-detail__door--left/--right  glass panes, x 0 -> -/+38%
       .pm-detail__drawer    the tray, y 10px -> 0 and 1 -> 1.12
       .pm-detail__wood      walnut table top, .5, leaves with the cover

   Every animated property is set by the module (WAAPI); this file only draws
   the rest state. No animation is declared here, so the reduced-motion branch
   in JS (which skips the cover entirely) has nothing to switch off. */

.pm-detail {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pm-detail__veil {
  position: absolute;
  inset: 0;
  background: rgb(6 10 11);
  opacity: 0;
}

/* ---- mirror ---- */

.pm-detail__frame {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  border: var(--pm-w-mid) solid var(--pm-brass);
  background: var(--pm-card-frame);
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / .55),
    inset 0 0 0 7px rgb(0 0 0 / .28),
    0 0 0 1px rgb(0 0 0 / .45),
    0 20px 44px -20px rgb(0 0 0 / .75);
  will-change: transform;
}

.pm-detail__glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform;
}

.pm-detail__glass img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) brightness(.94);
}

/* No cover on this persona: the glass still has to read as a mirror. */
.pm-detail__silver {
  width: 100%;
  height: 100%;
  background: linear-gradient(158deg, var(--pm-card) 0, var(--pm-line) 34%, var(--pm-ink-3) 68%, var(--pm-ink-2) 100%);
}

/* The silver that closes over the glass. The gradient is the clear hole and the
   background box is the metal: shrinking background-size pulls it in from every
   edge, and the flat colour (animated in by the module) closes the last point of
   light. No mask-image, so nothing here depends on a main-thread-only feature. */
.pm-detail__mask {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 50%, transparent 0 64%, var(--pm-line) 70%, var(--pm-ink-3) 100%);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 220% 220%;
  opacity: 0;
}

/* ---- seal ---- */

.pm-detail__seal {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid #8C3A2E;
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, rgb(140 58 46 / .5) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, var(--pm-ink-2), var(--pm-ink) 62%);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .16);
  will-change: transform, filter;
}

.pm-detail__seal::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 2px solid rgb(255 255 255 / .32);
  border-radius: 2px;
}

.pm-detail__seal::after {
  content: "";
  position: absolute;
  inset: 27%;
  border: 1px solid #8C3A2E;
  border-radius: 50%;
}

/* The paper disc starts exactly under the seal (inline left/top/width/height from
   the module) and is scaled up from there; the seal keeps it hidden until it
   grows past the face. */
.pm-detail__paper {
  position: absolute;
  border-radius: 50%;
  background: #EFE7D6;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.pm-detail__ink {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--pm-detail-x, 50%) var(--pm-detail-y, 50%),
    rgb(140 58 46 / .95) 0 16%,
    rgb(140 58 46 / .55) 34%,
    transparent 62%
  );
  transform-origin: var(--pm-detail-x, 50%) var(--pm-detail-y, 50%);
  opacity: 0;
  will-change: transform, opacity;
}

/* ---- drawer ---- */

.pm-detail__cabinet {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  border: var(--pm-w-mid) solid var(--pm-brass);
  background: linear-gradient(180deg, var(--pm-card-frame), var(--pm-ink));
  box-shadow:
    inset 0 0 34px rgb(0 0 0 / .7),
    0 20px 44px -20px rgb(0 0 0 / .8);
  will-change: transform, filter;
}

.pm-detail__door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(118deg, rgb(255 255 255 / .22), rgb(255 255 255 / .06) 42%, rgb(0 0 0 / .34) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18);
  will-change: transform;
}

.pm-detail__door--left { left: 0; }
.pm-detail__door--right { right: 0; }

.pm-detail__drawer {
  position: absolute;
  box-sizing: border-box;
  border: var(--pm-w-mid) solid var(--pm-brass);
  background:
    linear-gradient(180deg, rgb(0 0 0 / .12), rgb(0 0 0 / .45)),
    url("../assets/house/walnut.webp") center / cover no-repeat;
  box-shadow:
    inset 0 1px rgb(255 240 214 / .22),
    inset 0 -8px 14px -10px rgb(0 0 0 / .8),
    0 16px 30px -16px rgb(0 0 0 / .85);
  will-change: transform;
}

/* Brass pull, so the tray reads as something opened and not as a panel. */
.pm-detail__drawer::before {
  content: "";
  position: absolute;
  top: 44%;
  left: 18%;
  right: 18%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--pm-brass-hi), var(--pm-brass));
  box-shadow: 0 2px 3px rgb(0 0 0 / .55);
}

.pm-detail__wood {
  position: absolute;
  inset: 0;
  background: url("../assets/house/walnut.webp") center / cover no-repeat;
  opacity: 0;
}