/* ============================================================
   The Lobby — homepage rotunda scene (photo hall + doorway hotspots)
   Ported from _demos/rmoc-lobby-photo v12: static scene (no cursor
   parallax), one-off arrival zoom, warm doorway spill on hover,
   iris-dark "walk into the passage" transition, then real navigation.
   Door hotspots live in % of the IMAGE so they hold on any screen.
   ============================================================ */

.lobby{position:relative;height:min(calc(100svh - 52px),860px);min-height:540px;
  overflow:hidden;background:#0b0805}

/* cover wrapper: keeps the 1536×1024 frame proportional on any viewport */
.lobby .scene{position:absolute;left:50%;top:46.5%;aspect-ratio:1536/1024;
  min-width:86%;min-height:86%;
  transform:translate(-50%,-50%);
  will-change:transform;
  animation:lob-arrive 2.4s cubic-bezier(.25,.6,.3,1) backwards}
@keyframes lob-arrive{from{transform:translate(-50%,-50%) scale(1.05)}to{transform:translate(-50%,-50%) scale(1)}}
.lobby .scene img.hall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  animation:lob-breathe 11s ease-in-out infinite}
/* parallax carrier: holds the image + door hotspots so they move together (stay aligned).
   baseline scale gives headroom so the cursor nudge never reveals an edge */
.lobby .scene-inner{position:absolute;inset:0;transform:scale(1.045);transform-origin:center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);will-change:transform}

/* ---------- ambient life: breathing god-ray, floor glow, rising embers ---------- */
.lobby .ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lobby .ambient .ray{position:absolute;left:50%;top:-6%;width:56%;height:66%;transform:translateX(-50%);
  mix-blend-mode:screen;
  background:radial-gradient(48% 60% at 50% 0%,rgba(255,206,140,.16),transparent 68%);
  animation:lob-ray 8s ease-in-out infinite}
.lobby .ambient .floorglow{position:absolute;left:50%;bottom:1%;width:46%;height:28%;
  transform:translateX(-50%);mix-blend-mode:screen;
  background:radial-gradient(50% 62% at 50% 100%,rgba(255,198,128,.26),transparent 72%);
  animation:lob-floor 5.5s ease-in-out infinite}
.lobby .ambient .ember{position:absolute;width:3.4px;height:3.4px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,228,175,1),rgba(224,168,112,.4) 52%,transparent 74%);
  box-shadow:0 0 6px 1px rgba(255,205,140,.5);
  filter:blur(.2px);animation:lob-ember linear infinite}
@keyframes lob-breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.055)}}
@keyframes lob-ray{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes lob-floor{0%,100%{opacity:.5;transform:translateX(-50%) scale(.97)}50%{opacity:1;transform:translateX(-50%) scale(1.03)}}
@keyframes lob-ember{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  12%{opacity:1}
  75%{opacity:.8}
  100%{opacity:0;transform:translate(var(--drift,8px),calc(-1 * var(--rise,340px))) scale(1.1)}}

.lobby .scenehead{position:absolute;top:3.5%;left:0;right:0;text-align:center;z-index:10;pointer-events:none}
.lobby .scenehead .eyebrow{font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:var(--copper)}
.lobby .scenehead .sh-title{font-family:var(--display);font-weight:600;letter-spacing:.1em;
  font-size:clamp(1.25rem,2.8vw,1.9rem);margin-top:.5rem;color:var(--ivory);
  text-shadow:0 2px 22px rgba(0,0,0,.85)}

/* ---------- doorways: warm spill inside the arch ---------- */
.lobby .door{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  transform:translateX(-50%);cursor:pointer;display:block}
.lobby .mask{position:absolute;inset:0;border-radius:999px 999px 0 0;overflow:hidden;
  transform:skewX(var(--skew,0deg));transform-origin:50% 100%}
.lobby .spill{position:absolute;inset:0;opacity:.14;transition:opacity .55s ease;
  background:
    radial-gradient(58% 46% at 50% 88%, rgba(255,205,140,.85), rgba(224,168,112,.18) 54%, transparent 76%)}
.lobby .halo{position:absolute;inset:-5% -16%;opacity:0;transition:opacity .55s ease;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 62%, rgba(255,200,130,.22), transparent 74%)}

/* brass plaque above the keystone */
.lobby .plaque{position:absolute;left:50%;bottom:calc(100% + 6px + var(--plift,0%));
  transform:translateX(-50%) scale(var(--ps,1));transform-origin:50% 100%;
  font-family:var(--display);font-weight:600;font-size:clamp(.5rem,.72vw,.78rem);
  letter-spacing:.18em;text-transform:uppercase;color:#e8d9c2;white-space:nowrap;
  padding:.5em 1.25em;
  background:linear-gradient(180deg,#2b211a 0%,#1a130e 55%,#221a13 100%);
  border:1px solid rgba(192,122,61,.6);
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%);
  box-shadow:0 3px 10px rgba(0,0,0,.65);
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  transition:color .35s,border-color .35s;z-index:3;pointer-events:none}
.lobby .plaque::before{content:"";position:absolute;inset:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,214,150,.16),transparent 42%);
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)}
.lobby .enter{position:absolute;left:50%;bottom:7%;transform:translate(-50%,8px);z-index:3;
  font-size:clamp(.5rem,.7vw,.66rem);letter-spacing:.26em;text-transform:uppercase;
  color:var(--warm);opacity:0;transition:opacity .4s,transform .4s;white-space:nowrap;
  text-shadow:0 0 14px rgba(0,0,0,.95);pointer-events:none}

.lobby .door:hover .spill,.lobby .door:focus-visible .spill{opacity:.72}
.lobby .door:hover .halo,.lobby .door:focus-visible .halo{opacity:1}
.lobby .door:hover .plaque,.lobby .door:focus-visible .plaque{color:var(--copper-bright);
  border-color:rgba(224,168,112,.9)}
.lobby .door:hover .enter,.lobby .door:focus-visible .enter{opacity:1;transform:translate(-50%,0)}
.lobby .door:focus-visible{outline:1px solid var(--copper);outline-offset:4px}

/* the chosen arch flares while we walk in */
.lobby .door.entering .spill{opacity:1;transition-duration:1.2s}
.lobby .door.entering .enter{opacity:0}

/* vignette + frame falloff (static overlay, not dragged by the zoom) */
.lobby::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:9;
  background:
    linear-gradient(90deg,#0b0805 5%,transparent 14%),
    linear-gradient(270deg,#0b0805 5%,transparent 14%),
    linear-gradient(0deg,rgba(8,5,3,.7) 0%,transparent 10%),
    linear-gradient(180deg,rgba(8,5,3,.6) 0%,transparent 12%),
    radial-gradient(118% 92% at 50% 46%,transparent 60%,rgba(6,4,2,.66) 100%)}

/* iris-dark walk-in: edges darken while the arch fills the frame */
.lobby .flood{position:absolute;inset:0;z-index:15;pointer-events:none;opacity:0;
  background:
    radial-gradient(46% 60% at 50% 52%, transparent 26%, rgba(14,8,4,.88) 74%, #070402 100%);
  transition:opacity 1.1s ease}
.lobby.entering .flood{opacity:1;transition-delay:.25s}
.lobby .fade{position:absolute;inset:0;z-index:16;pointer-events:none;opacity:0;
  background:#070402;transition:opacity .6s ease}
.lobby.entering .fade{opacity:1;transition-delay:1.15s}
.lobby.entering .scene{transition:transform 1.15s cubic-bezier(.6,0,.25,1)}

.lobby .hint{position:absolute;left:3%;bottom:4%;z-index:10;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:#8a7a66;text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* ---------- mobile / no-hover fallback: brass room ledger ---------- */
.lobby-flat{display:none}
@media (max-width:860px){
  .lobby{display:none}
  /* mobile hero: the lobby hall as a static photo banner (nav is in the menu) */
  .lobby-flat{display:block;position:relative;overflow:hidden;
    border-bottom:1px solid var(--line);background:#0c0905}
  .lobby-flat picture{display:block}
  .lobby-flat img.hall{display:block;width:100%;height:auto;
    max-height:52vh;object-fit:cover;object-position:center 42%}
  .lobby-flat::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(12,9,5,.35) 0%,transparent 26% 58%,rgba(12,9,5,.92) 100%)}
  .lobby-flat .eyebrow{position:absolute;left:0;right:0;bottom:1.05rem;z-index:2;
    text-align:center;font-size:.6rem;letter-spacing:.42em;text-transform:uppercase;
    color:var(--copper-bright)}
}
@media (prefers-reduced-motion:reduce){
  .lobby .scene{animation:none}
  .lobby.entering .scene{transition:none}
  .lobby .scene img.hall{animation:none}
  .lobby .scene-inner{transform:none;transition:none}
  .lobby .ambient .ray,.lobby .ambient .floorglow,.lobby .ambient .ember{animation:none;opacity:0}
}