/* Paint the static frame/threshold separately from the moving solid slab.
   Only the leaf and its hardware participate in depth sorting. */
.door-frame {
  --slab-depth:14px;
  perspective:none;
  transform-style:flat;
  overflow:visible;
  opacity:1;
  filter:none;
  isolation:isolate;
  contain:none;
  background:none;
}
.door-frame::before,.door-frame::after { content:none; }
.frame-trim {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:
    linear-gradient(180deg,#f3ebd7,#d4d5c9 38%,#b6c0b0),
    linear-gradient(90deg,#8b928f,#f3ebd7 40%,#c7c9bc 72%,#a1aa9e),
    linear-gradient(90deg,#a1aa9e,#dbdbc9 38%,#e5e0ca 78%,#737e75),
    linear-gradient(180deg,#b8bead,#4c5b58);
  background-size:100% 12px,12px 100%,12px 100%,100% 5px;
  background-position:top,left,right,bottom;
  background-repeat:no-repeat;
}
.door-threshold {
  position:absolute; z-index:5; bottom:-3px; left:-4px; right:-4px; height:7px;
  background:linear-gradient(#a8b0a3,#b8bead 30%,#4c5b58 55%,#172326);
  box-shadow:0 4px 5px #0009; pointer-events:none;
}
/* This flat paint boundary clips only the finished 3D projection. It is
   deliberately OUTSIDE the perspective/preserve-3d subtree. One extra pixel
   under the leaf gives its antialiased lower edge clearance from the sill. */
.door-aperture {
  position:absolute; inset:12px 12px 6px; z-index:2;
  overflow:hidden; isolation:isolate; transform:translateZ(0);
}
.door-perspective {
  position:absolute; inset:0; perspective:1200px;
  perspective-origin:50% calc(50% - 3px);
  transform-style:flat;
}
.door-frame .door {
  background: transparent;
  box-shadow: none;
  opacity: 1;
  filter: none;
  overflow: visible;
  transform-style: preserve-3d;
  /* Rear hinge axis lets the slab clear the left jamb as it swings inward. */
  transform-origin: 0 50% -14px;
  transform: rotateY(0deg);
  transition: transform 1.05s cubic-bezier(.4,.03,.25,1);
}
.door-frame .door::before,.door-frame .door::after { content: none; }
.door-leaf {
  position: absolute;
  display: block;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  overflow: visible;
}
.slab-face { position: absolute; display: block; backface-visibility: hidden; pointer-events: none; }
.slab-front,.slab-back { inset: 0; background-color: #d8dbce; background-size: 100% 100%; background-position: center; }
.slab-front {
  transform: translateZ(0);
  background-image:
    radial-gradient(ellipse 90% 67% at 13% 0,#ffe8b424,transparent 74%),
    radial-gradient(ellipse 90% 67% at 92% 3%,#f5dfad18,transparent 70%),
    linear-gradient(180deg,transparent 50%,#0718291c),
    url('./assets/door-clean.png');
  box-shadow: inset 1px 0 1px #fff8,inset -1px -1px 1px #687b6399;
}
.slab-back {
  transform: translateZ(-14px) rotateY(180deg);
  background-image: linear-gradient(110deg,#293e3422,#a9b39b11),url('./assets/door-clean.png');
  box-shadow: inset 0 0 0 1px #909f87;
}
.slab-left,.slab-right {
  top: 0;
  width: 14px;
  height: 100%;
  background: linear-gradient(90deg,#7d8b77,#cbd2bd 18%,#e0e4d3 53%,#aab79f 90%,#7a8b73);
}
.slab-right { left: 100%; transform-origin: left center; transform: rotateY(90deg); }
.slab-left { left: 0; transform-origin: left center; transform: translateZ(-14px) rotateY(-90deg); }
.slab-top {
  left: 0;
  width: 100%;
  height: 14px;
  background: linear-gradient(0deg,#8c9a82,#d7dcc9 45%,#b2bea6);
}
.slab-top { top: 0; transform-origin: center top; transform: translateZ(-14px) rotateX(90deg); }
/* The underside always faces away during this Y-only swing; do not raster it. */

/* Fixed hinge barrels are painted with the front trim, outside depth sorting. */
.door-hinge {
  position: absolute;
  display: block;
  left: 10px;
  width: 6px;
  height: 32px;
  border-radius: 3px;
  z-index:4;
  transform:none;
  background: repeating-linear-gradient(0deg,transparent 0,transparent 9px,#07100b 10px,#53634b 11px),linear-gradient(90deg,#0c160f,#78836d 43%,#263b27 76%,#071108);
  box-shadow: 1px 0 1px #07120d88;
  pointer-events: none;
}
.hinge-upper { top: 95px; }
.hinge-lower { bottom: 88px; }

/* Rose, spindle and grip each use six distinct surfaces with positive depth. */
.door-handle {
  position: absolute;
  display: block;
  right: 18px;
  top: 52%;
  width: 24px;
  height: 65px;
  transform: translateZ(1px);
  transform-style: preserve-3d;
  pointer-events: none;
}
.hardware-box { position: absolute; display: block; transform-style: preserve-3d; overflow: visible; }
.hardware-face { position: absolute; display: block; backface-visibility: hidden; }
.hw-front,.hw-back { inset: 0; background: linear-gradient(135deg,#4d5657 0,#151e20 30%,#060c10 72%,#202b2b); }
.hw-front { transform: translateZ(var(--hardware-depth)); box-shadow: inset 0 1px 0 #9eafa03d; }
.hw-back { transform: rotateY(180deg); background: #0b1114; }
.hw-left,.hw-right { top: 0; height: 100%; width: var(--hardware-depth); background: linear-gradient(90deg,#080e11,#384546 52%,#111b1c); }
.hw-right { left: 100%; transform-origin: left center; transform: translateZ(var(--hardware-depth)) rotateY(90deg); }
.hw-left { left: 0; transform-origin: left center; transform: rotateY(-90deg); }
.hw-top,.hw-bottom { left: 0; width: 100%; height: var(--hardware-depth); background: linear-gradient(0deg,#10191c,#526164 45%,#202c2d); }
.hw-top { top: 0; transform-origin: center top; transform: rotateX(90deg); }
.hw-bottom { top: 100%; transform-origin: center top; transform: translateZ(var(--hardware-depth)) rotateX(-90deg); background: #081013; }
.handle-rose { --hardware-depth: 4px; left: 4px; top: 0; width: 18px; height: 28px; }
.handle-rose .hw-front,.handle-rose .hw-back { border-radius: 3px; }
.handle-shaft { --hardware-depth: 12px; left: 10px; top: 11px; width: 6px; height: 6px; transform: translateZ(4px); }
.handle-shaft .hw-front { border-radius: 2px; }
.handle-lever {
  --hardware-depth: 8px;
  left: -36px;
  top: 9.5px;
  width: 53px;
  height: 9px;
  transform-origin: 49px 4.5px;
  transform: translateZ(16px) rotateZ(0deg);
  transition: transform .28s cubic-bezier(.2,.6,.25,1);
}
.handle-lever .hw-front,.handle-lever .hw-back { border-radius: 2px; }
.handle-lever .hw-front { background: linear-gradient(180deg,#536061 0,#182628 30%,#060d12 68%,#243332); }
.door-scene.unlatching .handle-lever { transform: translateZ(16px) rotateZ(-24deg); }
.door-scene.opening .door { transform: rotateY(82deg); }
.door-scene.opening .handle-lever { transform: translateZ(16px) rotateZ(0deg); transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .door-frame .door,.handle-lever { transition: none; }
  .door-scene.opening .door { transform: rotateY(82deg); }
}