/* The outside lock: a navy vault corridor with a tall gold-wheel door at the end.
   Inspired by the Alexsias Digital Vault brand film. Pure CSS; door.js only toggles classes. */

/* ---------- Corridor scene ---------- */
.scene { position: absolute; inset: 0; overflow: hidden; perspective: 900px; perspective-origin: 50% 46%; background: radial-gradient(60% 55% at 50% 46%, #10284c 0%, #071329 55%, #02060e 100%); }
.scene .wall { position: absolute; top: -10%; bottom: -10%; width: 60%; background-color: #06122a;
  background-image:
    linear-gradient(90deg, rgba(2,6,14,.85), rgba(2,6,14,0) 70%),
    repeating-linear-gradient(0deg, transparent 0 86px, rgba(230,200,120,.55) 86px 87px, rgba(230,200,120,.08) 87px 96px, transparent 96px 110px),
    var(--circuit);
  background-size: auto, auto, 220px 220px;
}
.scene .wall.l { left: 0; transform-origin: 0 50%; transform: rotateY(62deg); }
.scene .wall.r { right: 0; transform-origin: 100% 50%; transform: rotateY(-62deg) scaleX(-1); }
.scene .wall::after { /* gold stock glowing on the shelves */
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(230,190,90,.30) 40px 58px, transparent 58px 96px);
  -webkit-mask: repeating-linear-gradient(0deg, transparent 0 62px, #000 62px 86px, transparent 86px 110px); mask: repeating-linear-gradient(0deg, transparent 0 62px, #000 62px 86px, transparent 86px 110px);
  filter: blur(1.5px); opacity: .8;
}
.scene .ceil { position: absolute; left: -20%; right: -20%; top: 0; height: 50%; transform-origin: 50% 0; transform: rotateX(-72deg);
  background: repeating-linear-gradient(0deg, #040b19 0 70px, rgba(255,226,160,.85) 70px 74px, #040b19 74px 140px), #040b19;
  -webkit-mask: linear-gradient(90deg, transparent 25%, #000 38% 62%, transparent 75%); mask: linear-gradient(90deg, transparent 25%, #000 38% 62%, transparent 75%); opacity: .7; }
.scene .floor { position: absolute; left: -30%; right: -30%; bottom: 0; height: 55%; transform-origin: 50% 100%; transform: rotateX(74deg);
  background:
    radial-gradient(40% 60% at 50% 0%, rgba(230,200,120,.28), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(201,162,75,.22) 118px 120px),
    repeating-linear-gradient(0deg, transparent 0 118px, rgba(201,162,75,.16) 118px 120px),
    linear-gradient(#0a1830, #02060e);
}
.scene .fog { position: absolute; left: -30%; right: -30%; bottom: -8%; height: 42%; pointer-events: none;
  background: radial-gradient(35% 55% at 30% 70%, rgba(190,205,230,.20), transparent 70%), radial-gradient(35% 50% at 72% 75%, rgba(190,205,230,.16), transparent 70%);
  filter: blur(18px); animation: fog-drift 18s ease-in-out infinite alternate; }
.scene .fog.b { bottom: -14%; opacity: .7; animation-duration: 26s; animation-direction: alternate-reverse; }
.scene .dust { position: absolute; inset: 0; pointer-events: none; }
.scene .dust i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #f2d58c; box-shadow: 0 0 6px #e6c878; opacity: 0; animation: dust 9s linear infinite; }
.scene .vignette { position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 45%, transparent 55%, rgba(0,0,0,.65)); pointer-events: none; }

/* ---------- The door ---------- */
.door-stage { position: relative; width: min(46vmin, 300px); aspect-ratio: 0.72; margin: 0 auto; perspective: 1400px; }
.door-stage .glow { position: absolute; inset: 4%; background: radial-gradient(60% 50% at 50% 50%, #fff4d2, #e6c878 35%, rgba(201,162,75,.2) 70%, transparent); opacity: 0; transition: opacity .8s ease .9s; }
.door-stage .portal { position: absolute; inset: -9% -12% -4%; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #0c1c38, #06112a);
  box-shadow: inset 0 0 0 1px rgba(201,162,75,.35), inset 0 0 0 9px #050d1e, inset 0 0 0 10px rgba(201,162,75,.45), 0 30px 90px -20px rgba(0,0,0,.9);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 7% 9% 3.5%; }
.door-stage .lintel { position: absolute; left: -6%; right: -6%; top: -7%; height: 2px; background: linear-gradient(90deg, transparent, #ffe4a3, transparent); box-shadow: 0 0 18px 3px rgba(255,220,150,.55); }
.door-stage .spill { position: absolute; left: -40%; right: -40%; bottom: -26%; height: 30%; background: radial-gradient(45% 60% at 50% 0%, rgba(230,200,120,.18), transparent 70%); pointer-events: none; }

.door { position: absolute; inset: 0; border-radius: 6px; transform-origin: 0% 50%; transform-style: preserve-3d;
  transition: transform 1.3s cubic-bezier(.7,0,.2,1) .95s, box-shadow 1s;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 30% 70%, rgba(0,0,0,.25)),
    linear-gradient(180deg, #17315c, #0d2145 50%, #0a1a38);
  box-shadow: inset 0 0 0 1px rgba(230,200,120,.55), inset 0 0 0 7px #0b1b36, inset 0 0 0 8px rgba(201,162,75,.3), 0 20px 50px rgba(0,0,0,.7); }
.door::before { /* recessed panels */
  content: ''; position: absolute; inset: 7% 9%; border-radius: 4px;
  background: linear-gradient(180deg, transparent 0 22%, rgba(201,162,75,.28) 22% calc(22% + 1px), transparent calc(22% + 1px) 78%, rgba(201,162,75,.28) 78% calc(78% + 1px), transparent calc(78% + 1px)), var(--circuit);
  background-size: auto, 160px 160px; opacity: .55;
  box-shadow: inset 0 0 0 1px rgba(201,162,75,.25), inset 0 0 30px rgba(0,0,0,.5); }
.door .rivets { position: absolute; inset: 3.2%; background:
  radial-gradient(circle, #e6c878 1.3px, transparent 1.8px) 0 0 / 100% 12.5% repeat-y; -webkit-mask: linear-gradient(90deg, #000 0 4px, transparent 4px calc(100% - 4px), #000 calc(100% - 4px)); mask: linear-gradient(90deg, #000 0 4px, transparent 4px calc(100% - 4px), #000 calc(100% - 4px)); opacity: .7; }
.bolt { position: absolute; right: -9%; width: 16%; height: 3.2%; border-radius: 3px; top: var(--y);
  background: linear-gradient(180deg, #f3dc9a, #c9a24b 55%, #8a6d2c); box-shadow: 0 0 8px rgba(201,162,75,.4);
  transition: transform .55s cubic-bezier(.5,0,.2,1) .4s; }
.door-stage.open .bolt { transform: translateX(-70%); }

.wheel { position: absolute; left: 50%; top: 50%; width: 74%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.wheel .ring { position: absolute; border-radius: 50%; }
.wheel .r1 { inset: 0; box-shadow: inset 0 0 0 2px rgba(201,162,75,.55), 0 0 0 1px rgba(0,0,0,.4); background: radial-gradient(circle, transparent 60%, rgba(201,162,75,.06) 61%, transparent 75%); }
.wheel .r1::after { content: ''; position: absolute; inset: -4%; border-radius: 50%; background: repeating-conic-gradient(rgba(230,200,120,.55) 0 .8deg, transparent .8deg 10deg); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%); mask: radial-gradient(circle, transparent 66%, #000 67%); }
.wheel .dial { position: absolute; inset: 14%; border-radius: 50%; transition: transform 1.1s cubic-bezier(.6,0,.2,1); }
.wheel .dial .band { position: absolute; inset: 0; border-radius: 50%; border: 6px solid transparent;
  background: linear-gradient(#0d2145, #0d2145) padding-box, linear-gradient(145deg, #fff0c4, #c9a24b 40%, #7b5f22 70%, #e6c878) border-box;
  box-shadow: 0 0 22px rgba(230,200,120,.35), inset 0 0 18px rgba(0,0,0,.6); }
.wheel .dial .spoke { position: absolute; left: 50%; top: 50%; width: 96%; height: 5%; margin: -2.5% 0 0 -48%; border-radius: 99px; transform: rotate(var(--a));
  background: linear-gradient(90deg, #8a6d2c, #e6c878 20%, #c9a24b 50%, #e6c878 80%, #8a6d2c); }
.wheel .dial .hub { position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff0c4, #c9a24b 55%, #7b5f22); box-shadow: 0 0 20px rgba(230,200,120,.55); }
.wheel .dial .hub::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, #0a1830 50%, #1d3a6a); box-shadow: inset 0 0 6px #000; }
.wheel .dial .notch { position: absolute; left: 50%; top: 1%; width: 3px; height: 9%; margin-left: -1.5px; background: #fff0c4; border-radius: 2px; box-shadow: 0 0 8px #e6c878; }

.status-ring { position: absolute; left: 50%; top: 50%; width: 82%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid transparent; border-top-color: #e6c878; opacity: .0; transition: opacity .3s; }
.door-stage.verifying .status-ring { opacity: 1; animation: ring-spin .9s linear infinite; }

.door-stage.verifying .wheel .dial { animation: dial-hunt 1.6s ease-in-out infinite; }
.door-stage.open .wheel .dial { animation: none; transform: rotate(540deg); }
.door-stage.denied .wheel .dial { animation: dial-shake .5s ease; }
.door-stage.denied .door { box-shadow: inset 0 0 0 1px rgba(239,125,125,.7), inset 0 0 0 7px #0b1b36, inset 0 0 0 8px rgba(239,125,125,.3), 0 20px 50px rgba(0,0,0,.7); }
.door-stage.open .door { transform: rotateY(-104deg); box-shadow: inset 0 0 0 1px rgba(230,200,120,.55), -30px 20px 70px rgba(0,0,0,.9); }
.door-stage.open .glow { opacity: 1; }

.door-status { margin-top: 26px; text-align: center; font: 500 11px var(--mono); letter-spacing: .34em; text-transform: uppercase; color: var(--muted); min-height: 1.2em; position: relative; }
.door-status b { color: var(--gold-hi); font-weight: 500; }

.bgscene { position: fixed !important; inset: 0; z-index: 0; }
.bgscene ~ header, .bgscene ~ main { position: relative; z-index: 1; }
.center-door { text-align: center; }
#after { margin: 18px auto 0; text-align: center; }

/* ---------- Entrance overlay ---------- */
.entrance { position: fixed; inset: 0; z-index: 50; background: #02060e; transition: opacity .8s ease, visibility .8s; }
.entrance.gone { opacity: 0; visibility: hidden; }
.entrance .inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; transition: transform 1.6s cubic-bezier(.6,0,.3,1); }
.entrance.walk .inner { transform: scale(2.6); }
.entrance .word { position: relative; font: 600 12px var(--sans); letter-spacing: .5em; text-transform: uppercase; color: var(--text); margin: 0 0 7vh; text-align: center; }
.entrance .word span { color: var(--gold-hi); text-shadow: 0 0 18px rgba(230,200,120,.5); }
.entrance .actions { position: relative; margin-top: 22px; display: flex; gap: 16px; justify-content: center; align-items: center; transition: opacity .3s; }
.entrance.walk .actions, .entrance.walk .word, .entrance.walk .door-status { opacity: 0; transition: opacity .4s; }
.entrance .skip { background: none; border: 0; color: var(--dim); font: 500 11px var(--mono); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; }
.entrance .skip:hover { color: var(--muted); }

@keyframes ring-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes dial-hunt { 0% { transform: rotate(0) } 35% { transform: rotate(-70deg) } 70% { transform: rotate(40deg) } 100% { transform: rotate(0) } }
@keyframes dial-shake { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-8deg) } 75% { transform: rotate(8deg) } }
@keyframes fog-drift { from { transform: translateX(-4%) } to { transform: translateX(4%) } }
@keyframes dust { 0% { opacity: 0; transform: translateY(0) } 15% { opacity: .9 } 85% { opacity: .6 } 100% { opacity: 0; transform: translateY(-120px) } }

@media (prefers-reduced-motion: reduce) {
  .door, .wheel .dial, .bolt, .glow, .entrance, .entrance .inner { transition-duration: .01s !important; transition-delay: 0s !important; }
  .status-ring, .door-stage.verifying .wheel .dial, .scene .fog, .scene .dust i { animation: none !important; }
}