/* The sign-in safe: six number wheels, a dial, a three-spoke handle, a door that swings open. */

.safe-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(10px, 2vh, 22px);
  padding: clamp(80px, 14vh, 150px) 16px 24px;
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.5, 0, .3, 1);
}
.safe-stage.leaving { opacity: 0; transform: translateY(14vh) scale(0.92); pointer-events: none; }

.safe {
  --w: min(400px, 82vw, 52vh);
  position: relative;
  width: var(--w);
  aspect-ratio: 440 / 540;
  perspective: 1600px;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.75));
}

.safe-body { position: absolute; inset: 0; }
.safe-body .body-art { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Interior, revealed when the door swings open. */
.safe-interior {
  position: absolute;
  left: 5.5%;
  right: 6.5%;
  top: 4.5%;
  bottom: 12%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 15%, transparent 85%, rgba(0, 0, 0, 0.7)),
    linear-gradient(180deg, #1d2226, #0e1113 60%, #0a0c0d);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9);
  overflow: visible;
  transform-style: preserve-3d;
}
.safe-interior .shelf {
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
  height: 4%;
  background: linear-gradient(180deg, #4a5157, #24292d);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.7);
}
.safe-folder {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 28%;
  height: 34%;
  background: linear-gradient(180deg, #d1ae6b, #b58f4f);
  border-radius: 2px 2px 3px 3px;
  box-shadow: 0 -2px 0 #e6c886 inset, 0 8px 18px rgba(0, 0, 0, 0.6);
  transition: transform 0.8s cubic-bezier(.3, .7, .2, 1);
  transform-origin: 50% 100%;
}
.sf-tab {
  position: absolute;
  top: -16%;
  left: 8%;
  padding: 2% 7%;
  font-family: var(--font-type);
  font-size: calc(var(--w) * 0.03);
  letter-spacing: 0.15em;
  background: inherit;
  background-color: #d1ae6b;
  border-radius: 4px 4px 0 0;
  color: #3b2b12;
}
.sf-stamp {
  position: absolute;
  right: 10%;
  bottom: 22%;
  font-family: var(--font-type);
  font-size: calc(var(--w) * 0.035);
  letter-spacing: 0.12em;
  color: var(--stamp-red);
  border: 2px solid currentColor;
  padding: 1% 3%;
  transform: rotate(-8deg);
  opacity: 0.85;
}
.safe.reveal .safe-folder { transform: translate3d(0, 34%, 220px) scale(1.25) rotate(-2deg); }

/* ---------- Door ---------- */

.safe-door {
  position: absolute;
  left: 5.5%;
  right: 6.5%;
  top: 4.5%;
  bottom: 12%;
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.5, .02, .25, 1);
  z-index: 2;
}
.safe.open .safe-door { transform: rotateY(112deg); }
.door-front, .door-back { position: absolute; inset: 0; backface-visibility: hidden; }
.door-front {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 0 2px #050605;
  container-type: inline-size;
}
.door-front .door-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.door-back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(90deg, transparent 0 18%, rgba(0, 0, 0, 0.25) 18% 19%),
    linear-gradient(90deg, #2a3035, #50585f 40%, #2a3035);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
}
.door-back::before, .door-back::after { /* bolt bars */
  content: '';
  position: absolute;
  right: -6%;
  width: 20%;
  height: 5%;
  background: linear-gradient(180deg, #e6eaec, #7e868c);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.door-back::before { top: 22%; }
.door-back::after { bottom: 22%; }

/* Tumbler windows: six brass-framed number wheels. */
.tumblers {
  position: absolute;
  left: 50%;
  top: 17.5%;
  transform: translateX(-50%);
  display: flex;
  gap: 2.2cqw;
  padding: 2.2cqw 3cqw;
  background-color: #a8843a;
  background-image:
    linear-gradient(180deg, rgba(255, 244, 205, 0.7), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.45)),
    var(--img-brass, linear-gradient(180deg, #e9cf86, #a77f32 55%, #6b4f1b));
  background-size: auto, 220px auto;
  background-blend-mode: overlay, normal;
  border-radius: 2cqw;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.35) inset, 0 -2px 0 rgba(0, 0, 0, 0.35) inset, 0 6px 12px rgba(0, 0, 0, 0.6);
}
.wheel {
  position: relative;
  width: 9.5cqw;
  height: 13.5cqw;
  overflow: hidden;
  border-radius: 1.2cqw;
  background: linear-gradient(180deg, #050505, #2a2622 30%, #f2e9d2 47%, #f2e9d2 53%, #2a2622 70%, #050505);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 4px 6px rgba(0, 0, 0, 0.8), inset 0 -4px 6px rgba(0, 0, 0, 0.8);
  cursor: text;
}
.wheel .strip {
  --d: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  transform: translateY(calc(var(--d) * -13.5cqw));
  transition: transform 0.28s cubic-bezier(.3, 1.4, .5, 1);
}
.wheel .strip span {
  height: 13.5cqw;
  display: grid;
  place-items: center;
  font-family: var(--font-type);
  font-size: 9cqw;
  color: #1a1612;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.wheel::after { /* glass + curvature */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 32%, transparent 68%, rgba(0, 0, 0, 0.75)), linear-gradient(100deg, rgba(255, 255, 255, 0.18), transparent 40%);
  pointer-events: none;
}
.wheel.active { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 4px 6px rgba(0, 0, 0, 0.8), inset 0 -4px 6px rgba(0, 0, 0, 0.8), 0 0 0 2px #fff2c0, 0 0 14px rgba(255, 220, 130, 0.7); }
.wheel.set { animation: wheel-set 0.25s ease; }
@keyframes wheel-set { 40% { transform: translateY(1px) scale(0.97); } }
.wheel-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  text-align: center;
  font-size: 16px;
  cursor: text;
  outline: none;
}
.wheel-input:disabled { cursor: not-allowed; }

.dial {
  position: absolute;
  left: 50%;
  top: 35%;
  width: 42%;
  transform: translateX(-50%);
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.7));
}
.dial:active { cursor: grabbing; }
.dial-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dial-svg .index { fill: #f0d27c; stroke: #5a3f10; stroke-width: 1.5; }
.dial-svg .knurl line { stroke: #000; stroke-opacity: 0.55; stroke-width: 1.4; }
.dial-svg .ticks line { stroke: #9aa0a5; stroke-width: 1.2; }
.dial-svg .ticks line.maj { stroke: #f2f2ee; stroke-width: 2.2; }
.dial-svg .nums text { fill: #f2efe6; font-family: var(--font-type); font-size: 21px; text-anchor: middle; dominant-baseline: middle; }
.dial-rot { transform-origin: 0 0; }
.dial-rot.smooth { transition: transform 0.35s cubic-bezier(.3, .8, .3, 1); }

.safe-handle {
  position: absolute;
  left: 50%;
  top: 83%;
  width: 19%;
  transform: translate(-50%, -50%);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.7));
}
.handle-svg { display: block; width: 100%; height: auto; overflow: visible; }
.handle-rot { transform-origin: 0 0; }
/* The wheel is spun: it winds up, carries a turn and a half on its weight, and stops as the bolts give. */
.safe.turning .handle-rot { animation: handle-spin 1.05s cubic-bezier(.3, .05, .2, 1) forwards; }
.safe.open .handle-rot { transform: rotate(540deg); }
@keyframes handle-spin {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-14deg); }
  86% { transform: rotate(548deg); }
  100% { transform: rotate(540deg); }
}
.safe.trying .handle-rot { animation: handle-strain 0.6s ease-in-out infinite; }
@keyframes handle-strain { 50% { transform: rotate(10deg); } }

.safe-plate {
  position: absolute;
  left: 50%;
  bottom: 13%;
  transform: translateX(-50%);
  padding: 0.6cqw 3cqw;
  font-family: var(--font-type);
  font-size: 3cqw;
  letter-spacing: 0.2em;
  color: #2b1d08;
  background: linear-gradient(180deg, #f1dc9a, #b58e3e 60%, #7a5a1e);
  border-radius: 1cqw;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.safe.denied { animation: safe-shake 0.45s ease; }
.safe.jiggle .handle-rot { animation: handle-jiggle 0.4s ease; }
@keyframes safe-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes handle-jiggle { 25% { transform: rotate(14deg); } 50% { transform: rotate(-6deg); } 75% { transform: rotate(8deg); } }
.safe.locked .tumblers { filter: grayscale(0.7) brightness(0.7); }
.safe.locked .dial { cursor: not-allowed; }

/* The pencilled tag hanging under the safe. */
.safe-tag {
  max-width: min(420px, 86vw);
  padding: 10px 16px 12px;
  transform: rotate(-1.2deg);
  text-align: center;
}
.safe-tag .hand { margin: 0; font-size: 1.6rem; }
.safe-tag .small { margin: 6px 0 0; font-size: 0.72rem; color: var(--ink-soft); line-height: 1.4; }