/* ROUND 5 — the building journey.
   Scroll-scrub entrance (street → doors → threshold → front desk),
   Donna chat, elevator overlay, real door-half transitions, floor pages. */

/* ---------------- the scrub ---------------- */
.journey{position:relative;height:460vh}
body.reduced .journey{height:100svh}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--canvas)}
.layer{position:absolute;inset:0;opacity:0;visibility:hidden}
/* the street paints immediately (no-JS LCP); apply() takes over once the scrub runs */
#ly-street{opacity:1;visibility:visible}
.layer .bgi{position:absolute;inset:0;background-size:cover;background-position:center;
  will-change:transform;transform:translateZ(0)}
.layer.vis{visibility:visible}
/* the street is a real <img> so it counts as the LCP element (bg images don't) */
#ly-street .bgi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
@media (max-aspect-ratio:1/1){#ly-street .bgi img{object-position:center bottom}}
#walkCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#ly-street{z-index:1;transition:opacity .5s ease}
#walkCanvas{z-index:0}
#ly-street.gone{opacity:0;pointer-events:none}
#ly-street.lobbyfix .bgi img{display:none}
#ly-street.lobbyfix .bgi{background-image:url('tour/lobby.webp')}
@media (max-aspect-ratio:1/1){#ly-street.lobbyfix .bgi{background-position:30% center}}
/* luminance dip during the crossfades */
.dipper{position:absolute;inset:0;background:#050505;opacity:0;pointer-events:none}
/* gradient scrims for copy legibility */
.jscrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,10,.6) 0%,rgba(7,8,10,.08) 30%,rgba(7,8,10,.06) 62%,rgba(7,8,10,.7) 100%)}

/* street copy */
.jcopy{position:absolute;left:0;right:0;bottom:clamp(56px,10vh,110px);z-index:3;
  padding-inline:clamp(20px,5vw,64px);max-width:1140px;margin:0 auto;will-change:transform,opacity}
.jcopy h1{font-size:clamp(42px,6.4vw,86px);text-shadow:0 4px 40px rgba(0,0,0,.6)}
.jcopy .sub{margin-top:16px;font-size:clamp(16px,1.9vw,19px);color:rgba(244,244,246,.88);max-width:46ch;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.jcopy .eyeb{color:rgba(244,244,246,.65)}
.scrollcue{margin-top:30px;display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,244,246,.7)}
.scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.85),transparent);
  animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(.3);transform-origin:top}45%{transform:scaleY(1)}100%{transform:scaleY(.3);transform-origin:top}}
body.reduced .scrollcue i{animation:none}

/* front desk choice */
.frontdesk{position:absolute;z-index:5;left:clamp(16px,5vw,72px);bottom:clamp(90px,16vh,160px);
  max-width:min(480px,calc(100vw - 32px));opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.frontdesk.on{opacity:1;transform:none;pointer-events:auto}
.dbubble{position:relative;background:rgba(12,12,14,.9);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);padding:18px 20px;font-size:15.5px;line-height:1.6;color:var(--body);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9)}
.dbubble::after{content:"";position:absolute;left:34px;bottom:-8px;width:14px;height:14px;
  background:rgba(12,12,14,.9);border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  transform:rotate(45deg)}
.dbubble .who{display:block;font-family:var(--fm);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);margin-bottom:8px}
.dchoice{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}

/* HUD */
.jhud{position:absolute;left:clamp(16px,3vw,30px);bottom:16px;z-index:6;font-size:9.5px;letter-spacing:.22em;
  color:rgba(244,244,246,.55);text-transform:uppercase;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.8)}

/* ---------------- Donna chat ---------------- */
.chat{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:flex-start;
  padding:clamp(12px,3vw,40px);background:rgba(5,5,6,.45);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .3s,visibility 0s .3s}
.chat.on{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .3s}
.chat-box{display:flex;flex-direction:column;width:min(430px,100%);max-height:min(620px,86svh);
  background:#0C0C0E;border:1px solid var(--line-strong);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);transform:translateY(18px);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.chat.on .chat-box{transform:none}
.chat-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.chat-h .cn{font-family:var(--fd);font-weight:700;font-size:15px;color:var(--ink)}
.chat-h .cr{font-family:var(--fm);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.chat-h .x{margin-left:auto;background:none;border:none;color:var(--mute);font-size:17px;cursor:pointer;padding:4px 6px}
.chat-h .x:hover{color:var(--ink)}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:200px;overscroll-behavior:contain}
.msg{max-width:86%;padding:10px 14px;border-radius:14px;font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:break-word}
.msg.d{align-self:flex-start;background:#16171A;border:1px solid var(--line);color:var(--body);border-bottom-left-radius:5px}
.msg.u{align-self:flex-end;background:#E9E9EC;color:#0B0B0C;border-bottom-right-radius:5px}
.msg.err{align-self:flex-start;background:var(--red-soft);border:1px solid rgba(255,97,97,.3);color:#FFB3B3}
/* thinking dots */
.msg.thinking{display:inline-flex;gap:5px;align-items:center;min-width:54px;min-height:20px}
.msg.thinking b{width:6px;height:6px;border-radius:50%;background:var(--mute);animation:think 1.2s ease-in-out infinite}
.msg.thinking b:nth-child(2){animation-delay:.18s}
.msg.thinking b:nth-child(3){animation-delay:.36s}
@keyframes think{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-f{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-f input{flex:1;background:#131316;border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--ink);font-family:var(--fb);font-size:14.5px;padding:11px 16px;outline:none}
.chat-f input:focus{border-color:var(--line-strong)}
.chat-f input::placeholder{color:var(--ash)}
.chat-f button[disabled]{opacity:.5;pointer-events:none}
@media(max-width:560px){
  .chat{padding:0;align-items:flex-end}
  .chat-box{width:100%;max-height:78svh;border-radius:18px 18px 0 0;border-bottom:none}
}

/* ---------------- elevator overlay ---------------- */
.lift{position:fixed;inset:0;z-index:60;opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .7s ease,visibility 0s .7s;background:var(--canvas)}
.lift.on{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .7s ease}
.lift .bgi{transform:scale(1.1);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.lift.on .bgi{transform:scale(1)}
/* deep-link arrival (/#elevator): appear instantly, no fade/zoom */
.lift.noanim,.lift.noanim .bgi{transition:none}
.lift.noanim .bgi{transform:scale(1)}
.lift .bgi{position:absolute;inset:0;background:url('tour/elevator.webp') center/cover no-repeat}
@media (max-aspect-ratio:1/1){.lift .bgi{background-position:62% center}}
.lift .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,10,.5) 0%,rgba(7,8,10,.04) 30%,rgba(7,8,10,.04) 62%,rgba(7,8,10,.66) 100%)}
.lift-hot{position:absolute;z-index:5;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}
.lb2{position:relative;width:var(--bs,40px);height:var(--bs,40px);border-radius:50%;border:1.4px solid rgba(120,98,55,.85);
  background:radial-gradient(circle at 35% 28%,rgba(255,235,190,.16),rgba(35,30,18,.42) 70%);color:#F4E7C4;
  font-family:var(--fm);font-size:calc(var(--bs,40px)*.34);display:grid;place-items:center;cursor:pointer;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.18),0 1px 4px rgba(0,0,0,.5);
  transition:box-shadow .2s,transform .15s;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.lb2:hover,.lb2:focus-visible{box-shadow:inset 0 1px 2px rgba(255,255,255,.2),0 0 16px rgba(244,231,196,.55);transform:scale(1.07);outline:none}
.lb2.lit{box-shadow:inset 0 1px 2px rgba(255,255,255,.25),0 0 22px rgba(244,231,196,.95);
  background:radial-gradient(circle at 35% 28%,rgba(255,240,200,.5),rgba(120,98,55,.5) 75%)}
.directory{position:absolute;z-index:5;background:linear-gradient(165deg,rgba(16,15,13,.88),rgba(8,8,7,.88));
  border:1px solid rgba(120,98,55,.45);border-radius:10px;padding:14px 18px;box-shadow:0 20px 50px -24px rgba(0,0,0,.9)}
.dir-head{font-family:var(--fm);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:#B49B62;
  padding-bottom:9px;border-bottom:1px solid rgba(180,155,98,.3);margin-bottom:8px;white-space:nowrap}
.dir-row{display:flex;gap:12px;align-items:baseline;padding:4px 2px;border-radius:5px;font-size:12.5px;color:#CDBF9F;
  transition:background .15s;white-space:nowrap}
.dir-row .df{font-family:var(--fm);font-size:10.5px;color:#8E7A4E;width:18px;text-align:right;flex:none}
.dir-row .dn{font-family:var(--fd);font-weight:600;color:#E8DCBA;letter-spacing:.01em}
.dir-row .dd{font-family:var(--fm);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#7E6F4C}
.dir-row.hot{background:rgba(180,155,98,.14)}
.dir-row.hot .dn{color:#FFF3D6}
.lift-back{position:absolute;left:50%;bottom:clamp(16px,3.5vh,30px);transform:translateX(-50%);z-index:6}
.lift-back .pbn{background:rgba(7,8,10,.72)}
@media(max-width:680px){.directory{left:12px!important;right:auto;top:auto!important;bottom:74px}}

/* ---------------- the doors (real halves) ---------------- */
.doors{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden}
.doors img{position:absolute;top:0;height:100%;width:50.05%;object-fit:cover;
  transition:transform .65s cubic-bezier(.6,.05,.3,1)}
/* at rest (and on first paint) the doors don't transition — prevents the arrival
   flash of "doors closing" and leaves no pending animations behind */
.doors.idle img,.doors.noanim img{transition:none}
.doors .dl{left:0;object-position:right center;transform:translateX(-101%)}
.doors .dr{right:0;object-position:left center;transform:translateX(101%)}
.doors.shut .dl,.doors.shut .dr{transform:translateX(0)}
.doors .ind{position:absolute;left:50%;top:14%;transform:translate(-50%,0);font-size:clamp(18px,2.6vw,26px);
  letter-spacing:.3em;color:#F4E7C4;background:rgba(10,9,7,.85);border:1px solid rgba(180,155,98,.5);
  border-radius:10px;padding:10px 22px;opacity:0;transition:opacity .3s;text-shadow:0 0 14px rgba(244,231,196,.5);z-index:2}
.doors.shut .ind{opacity:1}

/* ---------------- floor pages ---------------- */
.floor-hero{position:relative;min-height:72svh;display:flex;align-items:flex-end;overflow:hidden}
.floor-hero .fbg{position:absolute;inset:0;background-size:cover;background-position:center}
.floor-hero .fscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,10,.66) 0%,rgba(7,8,10,.15) 35%,rgba(7,8,10,.3) 70%,var(--canvas) 100%)}
.floor-hero .wrap{position:relative;z-index:2;padding-bottom:clamp(36px,6vh,64px);width:100%}
.floor-tag{font-family:var(--fm);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#CDBF9F;margin-bottom:14px}
.floor-hero h1{font-size:clamp(38px,5.6vw,72px);text-shadow:0 4px 40px rgba(0,0,0,.65)}
.floor-hero .sub{margin-top:14px;font-size:clamp(16px,1.9vw,18.5px);color:rgba(244,244,246,.88);max-width:54ch;text-shadow:0 2px 20px rgba(0,0,0,.6)}

/* team cards (office floor) */
.team{margin-top:clamp(32px,4.5vw,48px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tcardf{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s,transform .2s}
.tcardf:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.tcardf .img{aspect-ratio:16/10;background-size:cover;background-position:center}
.tcardf .bd{padding:18px 20px}
.tcardf h3{font-size:19px}
.tcardf .role{margin-top:3px;font-family:var(--fm);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.tcardf p{margin-top:10px;font-size:14px;color:var(--body);line-height:1.6}
@media(max-width:900px){.team{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.team{grid-template-columns:1fr}}

/* case files (vault floor) */
.cases{margin-top:clamp(32px,4.5vw,48px);display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cfile{position:relative;border:1px solid rgba(180,155,98,.3);background:linear-gradient(170deg,#121110,#0C0C0B);
  border-radius:var(--r-lg);padding:24px;transition:border-color .2s,transform .2s}
.cfile:hover{border-color:rgba(180,155,98,.55);transform:translateY(-2px)}
.cfile .tag{font-family:var(--fm);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#B49B62}
.cfile h3{margin-top:10px;font-size:21px}
.cfile .num{font-family:var(--fm);font-weight:500;font-size:clamp(26px,3vw,34px);color:var(--ink);margin-top:10px;white-space:nowrap}
.cfile .num .up{color:var(--green)}
.cfile p{margin-top:10px;font-size:14.5px;color:var(--mute);line-height:1.6}
.cfile .plink{margin-top:14px}
@media(max-width:760px){.cases{grid-template-columns:1fr}}

/* process steps */
.steps{margin-top:clamp(32px,4.5vw,48px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:step}
.step{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);padding:22px;counter-increment:step}
.step::before{content:"0" counter(step);font-family:var(--fm);font-size:11px;letter-spacing:.2em;color:#B49B62}
.step h3{margin-top:12px;font-size:18px}
.step p{margin-top:8px;font-size:14px;color:var(--mute);line-height:1.6}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* services cards (home + vault) */
.svc{margin-top:clamp(32px,4.5vw,48px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc .s{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);padding:24px;transition:border-color .2s}
.svc .s:hover{border-color:var(--line-strong)}
.svc h3{font-size:19px}
.svc p{margin-top:10px;font-size:14.5px;color:var(--mute);line-height:1.65}
@media(max-width:860px){.svc{grid-template-columns:1fr}}

/* elevator panel strip on floor pages */
.fl-nav{display:flex;align-items:center;gap:14px;margin-top:clamp(40px,6vw,64px);flex-wrap:wrap}
.fl-nav .lbl{font-family:var(--fm);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.fl-nav a{width:42px;height:42px;border-radius:50%;border:1.4px solid rgba(120,98,55,.7);display:grid;place-items:center;
  font-family:var(--fm);font-size:13px;color:#F4E7C4;background:radial-gradient(circle at 35% 28%,rgba(255,235,190,.13),rgba(35,30,18,.4) 70%);
  transition:box-shadow .2s,transform .15s}
.fl-nav a:hover{box-shadow:0 0 16px rgba(244,231,196,.5);transform:scale(1.07)}
.fl-nav a.here{box-shadow:inset 0 1px 2px rgba(255,255,255,.25),0 0 18px rgba(244,231,196,.8);
  background:radial-gradient(circle at 35% 28%,rgba(255,240,200,.45),rgba(120,98,55,.45) 75%)}
.fl-nav .nm{font-size:13px;color:var(--mute)}

@media (prefers-reduced-motion: reduce){
  .layer .bgi{transition:none}
  .doors img{transition:none}
  .lift{transition:opacity .15s}
  .msg.thinking b{animation:none;opacity:.6}
}