/* =====================================================================
   CSLLABS — css/concourse.css   (Salesforce concourse page)
   ---------------------------------------------------------------------
   Contents (search for these titles):
     BASE ........... colours, fonts, shared bits
     SCENE .......... wall, ceiling, floor in perspective
     HEADER ......... back link, logo, station name
     SIGN ........... hanging title of the concourse
     HALL / DOORS ... one door per project, with the info screen
     MOTION ......... doors opening on load (off for reduced motion)
     PHONES ......... adjustments for narrow / vertical screens
   Main colours are the variables at the top (:root).
   ===================================================================== */

/* ============ BASE ============ */
:root{--cyan:#5df1ff;--purple:#b967ff;--pink:#ff5da2;--amber:#ffb454;--bg:#05030a;--accent:var(--cyan);--bay:260px}
*{box-sizing:border-box}
html{color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
html,body{margin:0;min-height:100%;background:var(--bg);color:#eaf6ff;
  font-family:'Rajdhani','Segoe UI',system-ui,sans-serif;font-weight:500;-webkit-tap-highlight-color:transparent}
body{overscroll-behavior:none}
a,button{touch-action:manipulation}
a:focus-visible,.hall:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}

/* ============ SCENE ============ */
.scene{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(185,103,255,.22),transparent 62%),
    repeating-linear-gradient(90deg,transparent 0 calc(var(--bay) - 3px),rgba(93,241,255,.07) calc(var(--bay) - 3px) var(--bay)),
    linear-gradient(#0b0620 0%,#0a0518 55%,#05030a 100%)}
/* wall pillars */
.scene::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(var(--bay)*2 - 44px),rgba(4,3,12,.78) calc(var(--bay)*2 - 44px) calc(var(--bay)*2));
  -webkit-mask-image:linear-gradient(transparent 6%,#000 22%,#000 70%,transparent 86%);mask-image:linear-gradient(transparent 6%,#000 22%,#000 70%,transparent 86%)}
/* neon trim along the wall */
.scene::after{content:"";position:absolute;left:0;right:0;top:calc(100% - clamp(150px,27vh,280px));height:2px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--purple),var(--cyan),transparent);box-shadow:0 0 18px 2px rgba(93,241,255,.55)}

.ceiling{position:absolute;left:0;right:0;top:0;height:clamp(54px,11vh,110px);z-index:0;pointer-events:none;display:flex;justify-content:space-around;align-items:flex-end;
  background:linear-gradient(#020108,#07041280 70%,transparent);border-bottom:1px solid rgba(93,241,255,.18)}
.ceiling i{display:block;width:clamp(48px,11vw,150px);height:6px;margin-bottom:12px;border-radius:3px;
  background:linear-gradient(90deg,transparent,#eaffff,transparent);box-shadow:0 0 16px 3px rgba(93,241,255,.55),0 14px 34px 6px rgba(93,241,255,.14)}

.floor{position:absolute;left:0;right:0;bottom:0;height:clamp(150px,27vh,280px);z-index:0;pointer-events:none;overflow:hidden;perspective:420px;
  background:linear-gradient(#070514,#03020a)}
.floor .grid{position:absolute;left:-60%;right:-60%;top:0;height:230%;transform-origin:50% 0;transform:rotateX(62deg);
  background:
    repeating-linear-gradient(90deg,rgba(93,241,255,.34) 0 2px,transparent 2px 96px),
    repeating-linear-gradient(0deg,rgba(185,103,255,.26) 0 2px,transparent 2px 96px);
  -webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%)}
.floor::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(93,241,255,.10),transparent 40%)}

/* ============ HEADER ============ */
.top{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top) + 14px) clamp(16px,4vw,40px) 0}
.back{display:inline-flex;align-items:center;gap:.6em;justify-self:start;min-height:44px;padding:0 14px 0 10px;border:1px solid rgba(93,241,255,.45);border-radius:999px;
  background:rgba(6,9,22,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#dff6ff;text-decoration:none;
  font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition-property:background-color,box-shadow,scale;transition-duration:.18s}
.back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:translate .2s ease-out}
.back:hover{background:rgba(93,241,255,.2);box-shadow:0 0 18px -2px var(--cyan)}
.back:hover svg{translate:-3px 0}
.back:active{scale:.97}
.logo{justify-self:center;display:block;line-height:0}
.logo img{display:block;height:clamp(18px,2.6vw,30px);width:auto;filter:drop-shadow(0 0 8px rgba(93,241,255,.45))}
.where{justify-self:end;margin:0;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#9fb4d6;white-space:nowrap}

/* ============ SIGN ============ */
main{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.5vh,40px);
  padding:clamp(48px,11vh,110px) 0 clamp(130px,25vh,250px)}
.sign{text-align:center;padding:0 20px}
.eyebrow{margin:0 0 .6em;font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 10px var(--cyan)}
h1{margin:0;font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(24px,4.6vw,52px);letter-spacing:.08em;text-transform:uppercase;line-height:1.1;color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,.6),0 0 22px var(--cyan),0 0 52px var(--cyan)}
.lead{margin:1em auto 0;max-width:46ch;font-size:clamp(16px,1.6vw,20px);line-height:1.5;color:#c3d5ee}

/* ============ HALL / DOORS ============ */
.hall{display:flex;align-items:stretch;gap:clamp(20px,4vw,56px);overflow-x:auto;overflow-y:hidden;padding:30px clamp(16px,6vw,80px) 34px;
  scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(93,241,255,.4) transparent}
.hall>:first-child{margin-left:auto}
.hall>:last-child{margin-right:auto}
.door{flex:none;display:flex;flex-direction:column;width:min(84vw,400px);scroll-snap-align:center}
.door>.frame{flex:1}
.door.wide{width:min(88vw,560px)}
.no{display:flex;align-items:center;gap:.8em;margin:0 0 12px;font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan)}
.no::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.no::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}
.frame{position:relative;overflow:hidden;min-height:clamp(300px,42vh,390px);border:2px solid rgba(93,241,255,.65);border-radius:12px 12px 4px 4px;
  background:linear-gradient(160deg,rgba(9,14,32,.92),rgba(18,10,40,.9));
  box-shadow:0 0 44px -10px var(--cyan),0 26px 50px -20px rgba(93,241,255,.35),inset 0 0 40px -22px var(--cyan)}
.screen{position:relative;z-index:1;padding:22px 24px 24px}
.kind{margin:0 0 .5em;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--purple)}
.screen h2{margin:0 0 .45em;font-family:'Orbitron',sans-serif;font-weight:700;font-size:clamp(22px,2.6vw,30px);letter-spacing:.06em;color:#fff;text-shadow:0 0 18px rgba(93,241,255,.5)}
.desc{margin:0 0 1em;font-size:clamp(15px,1.4vw,17px);line-height:1.5;color:#cfe3f5}
.sub{margin:1.3em 0 .55em;font-family:'Orbitron',sans-serif;font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.feats{margin:0 0 .4em;padding:0;list-style:none;display:grid;gap:.55em}
.feats li{position:relative;padding-left:1.35em;font-size:clamp(14px,1.3vw,15.5px);line-height:1.45;color:#c3d5ee;text-wrap:pretty}
.feats li::before{content:"";position:absolute;left:.15em;top:.5em;width:6px;height:6px;rotate:45deg;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.feats b{font-weight:600;color:#fff}
.repo{margin:1.1em 0 1em;padding:.5em .8em;display:inline-block;border:1px dashed rgba(255,255,255,.22);border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:#a8c4e8;word-break:break-all}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1.3em;padding:0;list-style:none}
.chips li{padding:3px 9px;border:1px solid rgba(93,241,255,.55);border-radius:999px;background:rgba(93,241,255,.08);
  font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.cta{display:inline-flex;align-items:center;gap:.7em;min-height:44px;padding:0 18px;border:1px solid var(--cyan);border-radius:4px;
  background:rgba(93,241,255,.09);color:#eaffff;text-decoration:none;text-shadow:0 0 10px var(--cyan);
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 0 22px -4px rgba(93,241,255,.55),inset 0 0 16px -8px var(--cyan);
  transition-property:background-color,box-shadow,scale;transition-duration:.18s}
.cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:translate .2s ease-out}
.cta:hover{background:rgba(93,241,255,.24);box-shadow:0 0 32px -2px var(--cyan),inset 0 0 16px -8px var(--cyan)}
.cta:hover svg{translate:2px -2px}
.cta:active{scale:.97}

/* sealed doors (projects still to come) */
.sealed{opacity:.78}
.sealed .frame{border-color:rgba(185,103,255,.55);box-shadow:0 0 32px -14px var(--purple),inset 0 0 40px -26px var(--purple)}
.sealed .no{color:var(--purple)}.sealed .no::before{background:var(--purple);box-shadow:0 0 10px var(--purple)}.sealed .no::after{background:linear-gradient(90deg,var(--purple),transparent)}
.redact{display:block;height:9px;margin:.8em 0;background:rgba(255,255,255,.4)}

/* door leaves */
.leaf{position:absolute;top:0;bottom:0;width:50.5%;z-index:2;pointer-events:none;
  background:linear-gradient(#141a36,#0c1026);box-shadow:inset 0 0 0 1px rgba(93,241,255,.25)}
.leaf::before{content:"";position:absolute;top:10%;bottom:10%;width:62%;border:1px solid rgba(93,241,255,.22);background:rgba(93,241,255,.05)}
.leaf::after{content:"";position:absolute;top:0;bottom:0;width:3px;background:var(--cyan);box-shadow:0 0 14px 2px var(--cyan)}
.leaf.l{left:0}.leaf.l::before{left:12%}.leaf.l::after{right:0}
.leaf.r{right:0}.leaf.r::before{right:12%}.leaf.r::after{left:0}
.sealed .leaf::after{background:var(--purple);box-shadow:0 0 14px 2px var(--purple)}

/* ============ MOTION ============ */
.door:not(.sealed) .leaf.l{animation:openL 1.1s cubic-bezier(.65,0,.35,1) .45s forwards}
.door:not(.sealed) .leaf.r{animation:openR 1.1s cubic-bezier(.65,0,.35,1) .45s forwards}
@keyframes openL{to{transform:translateX(-102%)}}
@keyframes openR{to{transform:translateX(102%)}}
.sign>*,.door{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.sign>:nth-child(2){animation-delay:.08s}.sign>:nth-child(3){animation-delay:.16s}
.door:nth-child(2){animation-delay:.12s}.door:nth-child(3){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ceiling i{animation:hum 5s ease-in-out infinite}.ceiling i:nth-child(even){animation-delay:-2.2s}
@keyframes hum{50%{opacity:.7}}

/* ============ PHONES ============ */
.foot{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:3;text-align:center;pointer-events:none}
.foot small{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.3em;opacity:.62}
@media (max-width:640px){
  .top{grid-template-columns:auto 1fr}
  .logo{justify-self:end}
  .where{display:none}
  .back span{font-size:10px;letter-spacing:.12em}
  .eyebrow{font-size:10px;letter-spacing:.3em}
}
@media (prefers-reduced-motion:reduce){
  .leaf{display:none}
  .sealed .leaf{display:block}
  .sign>*,.door,.ceiling i{animation:none}
  .back svg,.cta svg{transition:none}
}