/* Shared camera, shared shaft, perpendicular key plane. */
.reveal-pending body { visibility: hidden; }
.reveal-block { display: none; }
.reveal-block.is-revealed { display: revert; }
.hero-stage {
  width: calc(100vw - 16px);
}
.hero-media {
  --door-width: clamp(250px, 25vw, 360px);
  --mechanism-width: clamp(155px, 15vw, 215px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 7vw, 112px);
  min-height: min(82vh, 760px);
  overflow: hidden;
  perspective: 1200px;
  perspective-origin: 54% 48%;
}
.mechanism {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: var(--mechanism-width);
  max-width: none;
  transform: translate3d(0, 16px, -75px);
}
.mechanism-photo { aspect-ratio: 4 / 3; background: transparent; border: 0; overflow: visible; perspective: none; }
.work-video-frame {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--door-width);
  margin: 0;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transform: translateZ(38px) rotateX(-4deg) rotateY(-14deg);
  background: #111;
  outline: 1px solid rgb(70 67 62 / .36);
  box-shadow: 14px 18px 30px rgb(0 0 0 / .10);
}
.work-video {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  aspect-ratio: 9 / 16;
  background: #000;
  object-fit: cover;
  cursor: pointer;
}
.interaction-interface { margin-top: 1em; }
.key {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; appearance: none; cursor: grab;
  touch-action: none; user-select: none; transform: none; transition: none;
  perspective: 1100px; perspective-origin: 56% 50%; transform-style: preserve-3d;
}
.key.is-winding { cursor: grabbing; }
.key:focus-visible { filter: none; outline: 1px dotted #00e; outline-offset: 2px; }
.key.is-winding img, .key.is-returning img { filter: none; }
.lock-assembly {
  display: block; position: absolute; width: 62%; aspect-ratio: 1;
  left: 28%; top: 50%; transform-origin: 50% 50%;
  transform: translateY(-50%) rotateX(-8deg) rotateY(-38deg);
  transform-style: preserve-3d; pointer-events: none;
}
.lock-face, .circle-face { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.lock-rotor {
  display: block; position: absolute; inset: 0; transform-style: preserve-3d;
  /* Shared cylinder centre: approximately (128,130) on both 256px canvases. */
  transform-origin: 50% 50.78%;
  transform: translateZ(1px) rotateZ(var(--key-angle));
}
/* Key plane YZ is perpendicular to lock and circle XY.
   The tip is on the common Z shaft and the bow extends toward the viewer.
   Only the parent rotor winds; the 90deg transform is a fixed mounting angle. */
.key-plane {
  position: absolute; display: block; width: 64%; aspect-ratio: 1;
  left: -14%; top: 18.78%; transform-origin: 100% 50%;
  transform: rotateY(90deg); transform-style: preserve-3d;
}
.key-plane img { display: block; width: 100%; height: 100%; backface-visibility: visible; }
@media (max-width: 600px) {
  .hero-media {
    --door-width: min(52vw, 270px);
    --mechanism-width: min(33vw, 158px);
    gap: clamp(14px, 4vw, 24px);
    min-height: min(76vh, 620px);
    perspective: 850px;
  }
  .work-video-frame {
    transform: translateZ(22px) rotateX(-3deg) rotateY(-10deg);
  }
  .mechanism {
    transform: translate3d(0, 10px, -38px);
  }
  .work-video { width: 100%; height: auto; }
  .mechanism-photo { perspective: none; }
  .key { perspective: 650px; }
}