/* Front door: Alexsias's vault lobby image with a working keypad and an opening door.
   Everything is positioned in the image's own pixel space (1536 x 1024) via --f (scale factor). */
.gate { position: fixed; inset: 0; z-index: 60; background: #000; overflow: hidden; transition: opacity .9s ease, visibility .9s; }
.gate.gone { opacity: 0; visibility: hidden; }
.gate .stage { position: absolute; left: 50%; top: 50%; width: calc(1536px * var(--f)); height: calc(1024px * var(--f)); transform: translate(-50%, -50%); }
.gate .cam { position: absolute; inset: 0; transform-origin: 50% 66.4%; transition: transform 1.1s cubic-bezier(.6,0,.2,1); }
.gate .layer { position: absolute; inset: 0; background:
  url('/assets/lobby-0.webp') 0 0 / 100% calc(258px * var(--f)) no-repeat,
  url('/assets/lobby-1.webp') 0 calc(256px * var(--f)) / 100% calc(258px * var(--f)) no-repeat,
  url('/assets/lobby-2a.webp') 0 calc(512px * var(--f)) / 100% calc(130px * var(--f)) no-repeat,
  url('/assets/lobby-2b.webp') 0 calc(640px * var(--f)) / 100% calc(130px * var(--f)) no-repeat,
  url('/assets/lobby-3a.webp') 0 calc(768px * var(--f)) / 100% calc(130px * var(--f)) no-repeat,
  url('/assets/lobby-3b.webp') 0 calc(896px * var(--f)) / 100% calc(128px * var(--f)) no-repeat; }

/* Inside the vault: the gold corridor from the brand film, revealed as the door swings */
.gate .inside { position: absolute; inset: 0; clip-path: ellipse(21.6% 32.4% at 49.8% 46.875%); opacity: 0; transition: opacity .5s ease; background: #050b16; }
.gate .inside .scene { position: absolute; inset: 0; }
.gate .inside .burst { position: absolute; inset: 0; background: radial-gradient(22% 30% at 49.8% 46%, rgba(255,244,210,.95), rgba(230,200,120,.55) 45%, rgba(201,162,75,0) 100%); opacity: 0; transition: opacity 1.2s ease .3s; }
.gate .band { position: absolute; inset: 0; clip-path: inset(16.41% 0 29.49% 0); perspective: calc(1800px * var(--f)); perspective-origin: 49.8% 46.875%; }
.gate .swing { position: absolute; inset: 0; transform-origin: 71.7% 46.875%; transition: transform 1.6s cubic-bezier(.55,0,.25,1); transform-style: preserve-3d; }
.gate .spin { position: absolute; left: 27.93%; top: 14.06%; width: 43.75%; height: 65.625%; border-radius: 50%; background: url('/assets/door-l.webp') left top / 50.24% 100% no-repeat, url('/assets/door-r.webp') right top / 50.24% 100% no-repeat; opacity: 0; transition: transform 1.2s cubic-bezier(.6,0,.2,1), filter .6s; }
.gate.unlock .spin, .gate.swing .spin { opacity: 1; }
.gate .rim { position: absolute; left: 27.6%; top: 13.6%; width: 44.4%; height: 66.6%; border-radius: 50%; box-shadow: 0 0 0 calc(2px * var(--f)) rgba(255,226,160,.9), 0 0 calc(30px * var(--f)) calc(4px * var(--f)) rgba(255,210,130,.55); opacity: 0; transition: opacity .6s; }
.gate .ped { clip-path: polygon(44.66% 56.45%, 55.73% 56.45%, 56.58% 57.23%, 59.57% 80.37%, 59.83% 81.45%, 59.83% 100%, 39.91% 100%, 39.91% 81.45%, 40.17% 80.18%, 43.55% 57.23%); }

/* The keypad screen, laid exactly over the pedestal's screen */
.gate .pad { position: absolute; left: calc(673px * var(--f)); top: calc(591px * var(--f)); width: calc(190px * var(--f)); height: calc(178px * var(--f));
  clip-path: polygon(11.6% 0, 91% 0, 100% 100%, 0 100%);
  background: radial-gradient(120% 70% at 50% 0%, #121823, #06080d 70%); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; font-family: var(--sans); color: #eef2f8; }
.gate .pad .title { margin-top: calc(9px * var(--f)); font-weight: 600; font-size: calc(8.6px * var(--f)); line-height: 1.35; letter-spacing: .16em; text-align: center; text-transform: uppercase; min-height: calc(24px * var(--f)); }
.gate .pad .dots { display: flex; gap: calc(9px * var(--f)); margin: calc(4px * var(--f)) 0 calc(6px * var(--f)); }
.gate .pad .dots i { width: calc(7px * var(--f)); height: calc(7px * var(--f)); border-radius: 50%; border: 1px solid rgba(238,242,248,.6); transition: background .15s, box-shadow .15s, border-color .15s; }
.gate .pad .dots i.on { background: #f2d58c; border-color: #f2d58c; box-shadow: 0 0 calc(8px * var(--f)) #e6c878; }
.gate .pad .keys { display: grid; grid-template-columns: repeat(3, calc(30px * var(--f))); gap: calc(5px * var(--f)) calc(8px * var(--f)); }
.gate .pad button { height: calc(22px * var(--f)); padding: 0; border-radius: calc(4px * var(--f)); border: 1px solid rgba(238,242,248,.42); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color: #fff; font: 500 calc(12.5px * var(--f)) var(--sans); cursor: pointer; box-shadow: 0 0 calc(6px * var(--f)) rgba(200,220,255,.18), inset 0 1px 0 rgba(255,255,255,.12);
  transition: background .12s, box-shadow .12s, border-color .12s, transform .08s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.gate .pad button:hover { border-color: #f2d58c; }
.gate .pad button:active, .gate .pad button.hit { background: rgba(242,213,140,.35); border-color: #f2d58c; box-shadow: 0 0 calc(12px * var(--f)) rgba(242,213,140,.7); transform: scale(.96); }
.gate .pad button.sm { font-size: calc(8px * var(--f)); color: rgba(238,242,248,.7); border-color: rgba(238,242,248,.2); }
.gate .pad button:focus-visible { outline: 2px solid #f2d58c; outline-offset: 1px; }
.gate .pad .line { font: 500 calc(7.5px * var(--f)) var(--mono); letter-spacing: .14em; color: rgba(238,242,248,.75); text-transform: uppercase; margin-top: calc(18px * var(--f)); text-align: center; padding: 0 calc(22px * var(--f)); line-height: 1.6; }
.gate .pad .spinner { width: calc(40px * var(--f)); height: calc(2px * var(--f)); margin-top: calc(26px * var(--f)); background: linear-gradient(90deg, transparent, #f2d58c, transparent) 0 0 / 200% 100%; animation: pad-scan 1.1s linear infinite; }

.gate .pad.wrong .dots { animation: pad-shake .45s ease; }
.gate .pad.wrong .dots i.on { background: #ef7d7d; border-color: #ef7d7d; box-shadow: 0 0 calc(8px * var(--f)) #ef7d7d; }
.gate .pad.checking .dots i { animation: pad-pulse .8s ease-in-out infinite; }
.gate.granted .pad { background: radial-gradient(120% 90% at 50% 30%, #3a2c0e, #0b0904 75%); }
.gate.granted .pad .title { color: #f2d58c; text-shadow: 0 0 calc(10px * var(--f)) rgba(242,213,140,.7); }
.gate.granted .pad button { border-color: rgba(242,213,140,.6); color: #f2d58c; }

/* Opening sequence */
.gate.unlock .spin { transform: rotate(-32deg); }
.gate.unlock .rim { opacity: 1; }
.gate.swing .inside { opacity: 1; }
.gate.swing .inside .burst { opacity: 1; }
.gate.swing .swing { transform: rotateY(-78deg); }
.gate.swing .spin { filter: brightness(.8); }
.gate.enter .cam { transition-duration: 1.5s; transition-timing-function: cubic-bezier(.7,0,.3,1); }
.gate .ped, .gate .pad { transition: opacity .7s ease; }
.gate.enter .ped, .gate.enter .pad { opacity: 0; }

/* Lobby UI under the scene */
.gate .hint { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 18px; align-items: center; white-space: nowrap;
  font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; transition: opacity .4s; z-index: 2; }
.gate .hint a, .gate .hint button { color: rgba(242,213,140,.9); background: rgba(3,6,12,.55); border: 1px solid rgba(242,213,140,.35); padding: 9px 14px; border-radius: 999px; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; backdrop-filter: blur(6px); text-decoration: none; }
.gate .hint a:hover, .gate .hint button:hover { border-color: #f2d58c; }
.gate.granted .hint, .gate.status .hint { opacity: 0; pointer-events: none; }
.gate .tip { position: absolute; left: 50%; bottom: calc(74px + env(safe-area-inset-bottom)); transform: translateX(-50%); font: 500 11px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: rgba(238,242,248,.7); transition: opacity .4s; z-index: 2; text-align: center; }
.gate.zoom .tip, .gate.granted .tip, .gate.status .tip { opacity: 0; }

.gate .join { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(2,5,10,.6); backdrop-filter: blur(4px); z-index: 3; padding: 20px; }
.gate .join .holo { width: min(420px, 100%); }

@keyframes pad-shake { 0%,100% { transform: translateX(0) } 20%,60% { transform: translateX(-5%) } 40%,80% { transform: translateX(5%) } }
@keyframes pad-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes pad-scan { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .gate .cam, .gate .swing, .gate .spin, .gate .inside, .gate { transition-duration: .01s !important; }
}