/* ============ AI Lab (/ai-lab) — pinned NOVA image sequence ============ */
/* With JavaScript the page opens straight into the full-screen NOVA stage: the shared header and the
   static fallback (intro + poster + list) are hidden, and the stage carries its own top bar. */
.page-lab .page-header{position:relative}
.js .page-lab .page-header,.js .labx-intro,.js .labx-fallback{display:none}
.js #ai-lab-root:not(.is-mounted){min-height:100vh;min-height:100svh;background:#050d1c url(/assets/ai-labs/nova-sequence/poster-compact.webp) center/cover no-repeat}

.labx-intro{padding:clamp(48px,7vw,96px) 0 clamp(32px,5vw,64px)}
.labx-intro h1{margin:0 0 18px;font-size:clamp(40px,6vw,76px);line-height:1;font-weight:600;letter-spacing:-.045em}
.labx-intro h1 span{color:var(--slate-3)}

/* ---- stage ---- */
.labx{position:relative}
.labx-stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:#050d1c;color:#fff;isolation:isolate}
.labx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.labx-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,13,28,.82) 0%,rgba(5,13,28,.45) 28%,rgba(5,13,28,0) 52%),
             linear-gradient(0deg,rgba(5,13,28,.75) 0%,rgba(5,13,28,0) 22%),
             linear-gradient(180deg,rgba(5,13,28,.72) 0%,rgba(5,13,28,0) 20%)}
.labx-hud{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;gap:20px;
  padding:clamp(20px,3vw,40px) clamp(16px,4vw,64px) clamp(20px,3vw,36px);pointer-events:none}
.labx-hud > *{pointer-events:auto}
.labx-top{display:flex;align-items:center;gap:16px}
.labx-logo{display:block;flex:none}
.labx-logo img{display:block;width:50px;height:auto}
.labx-kicker{margin-right:auto!important}
.labx-nav{display:flex;align-items:center;gap:4px}
.labx-nav a{padding:9px 14px;border-radius:999px;color:rgba(255,255,255,.78);font-size:14px;font-weight:500;text-decoration:none;transition:background-color .2s,color .2s}
.labx-nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.labx-nav a.labx-nav-cta{background:#fff;color:var(--ink);margin-left:6px}
.labx-nav a.labx-nav-cta:hover{background:#e8f3fb}
.labx-kicker{margin:0;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.18em;text-transform:uppercase;color:#9fc4ff}
.labx-kicker span{color:rgba(255,255,255,.45)}

/* ---- module manifest ---- */
.labx-manifest{align-self:center;display:grid;gap:4px;margin:0;padding:0;list-style:none;width:min(430px,100%)}
.labx-manifest button{width:100%;display:grid;grid-template-columns:54px 1fr auto;align-items:center;column-gap:10px;
  padding:12px 14px;border:1px solid transparent;border-radius:14px;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;
  opacity:.5;transition:opacity .35s,background-color .35s,border-color .35s,transform .45s}
.labx-manifest li.is-past button{opacity:.62}
.labx-manifest button:hover,.labx-manifest button:focus-visible{opacity:.9}
.labx-manifest button:focus-visible{outline:2px solid #7fb0ff;outline-offset:2px}
.labx-manifest li.is-active button{opacity:1;transform:translateX(6px);
  background:linear-gradient(90deg,rgba(17,105,220,.30),rgba(5,13,28,.55));border-color:rgba(127,176,255,.28)} /* no backdrop blur: it re-blurred the canvas on every scroll frame */
.labx-code{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:rgba(255,255,255,.55);transition:color .35s}
.labx-manifest li.is-active .labx-code{color:#7fb0ff}
.labx-name{font-size:clamp(16px,1.35vw,19px);font-weight:500;letter-spacing:-.01em}
.labx-cat{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.labx-desc{grid-column:2 / -1;overflow:hidden;max-height:0;opacity:0;font-size:14.5px;line-height:1.5;color:rgba(232,240,250,.82);
  transition:max-height .45s ease,opacity .35s ease,padding-top .45s ease}
.labx-manifest li.is-active .labx-desc{max-height:6em;opacity:1;padding-top:6px}

/* ---- progress ---- */
.labx-progress{position:relative;height:2px;border-radius:2px;background:rgba(255,255,255,.14)}
.labx-bar{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#1169dc,#7fb0ff);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.labx-progress i{position:absolute;top:-3px;width:1px;height:8px;background:rgba(255,255,255,.3)}
.labx-hint{position:absolute;left:50%;bottom:clamp(36px,5vw,56px);transform:translateX(-50%);margin:0;pointer-events:none;
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);
  animation:labx-hint 2.4s ease-in-out infinite}
/* once the user has started scrolling the hint fades out */
.labx.is-scrolling .labx-hint{opacity:0!important;animation:none;transition:opacity .4s}
@keyframes labx-hint{0%,100%{opacity:.25;transform:translate(-50%,0)}50%{opacity:.8;transform:translate(-50%,4px)}}

/* ---- without JavaScript (the React app replaces this) ---- */
.labx-fallback{padding:0 0 clamp(48px,7vw,96px)}
.labx-fallback img{display:block;width:100%;height:auto;border-radius:24px;margin-bottom:28px}
.labx-fallback-list{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.labx-fallback-list p{margin:4px 0 0;color:var(--slate-2)}
.labx-fallback-list .labx-code,.labx-fallback-list .labx-cat{color:var(--slate-3)}

/* ---- phones / portrait: NOVA on top, the manifest becomes a compact strip at the bottom ---- */
@media (max-width:760px),(orientation:portrait) and (max-width:1024px){
  .labx-shade{background:linear-gradient(0deg,rgba(5,13,28,.95) 0%,rgba(5,13,28,.7) 30%,rgba(5,13,28,0) 55%),
                         linear-gradient(180deg,rgba(5,13,28,.7) 0%,rgba(5,13,28,0) 16%)}
  .labx-top{gap:10px}
  .labx-logo img{width:40px}
  .labx-nav a:not(.labx-nav-cta){display:none}
  .labx-nav a.labx-nav-cta{padding:8px 14px;font-size:13px}
  .labx-hud{grid-template-rows:auto 1fr auto auto;gap:14px;padding-bottom:max(84px,calc(env(safe-area-inset-bottom) + 76px))}
  .labx-manifest{grid-row:3;align-self:end;display:flex;flex-wrap:wrap;gap:6px;width:100%}
  .labx-manifest li{flex:0 0 auto}
  .labx-manifest li.is-active{order:-1;flex-basis:100%}
  .labx-manifest button{opacity:.55;padding:8px 12px;border-color:rgba(255,255,255,.14);border-radius:999px;grid-template-columns:auto}
  .labx-manifest li:not(.is-active) .labx-name,.labx-manifest li:not(.is-active) .labx-cat,.labx-manifest li:not(.is-active) .labx-desc{display:none}
  .labx-manifest li.is-active button{transform:none;border-radius:16px;padding:14px 16px;grid-template-columns:auto 1fr;row-gap:2px}
  .labx-manifest li.is-active .labx-cat{grid-column:2;justify-self:start}
  .labx-manifest li.is-active .labx-name{grid-column:1 / -1;grid-row:2;font-size:20px}
  .labx-manifest li.is-active .labx-desc{grid-row:3;grid-column:1 / -1}
  .labx-progress{grid-row:4}
  .labx-hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  .labx-manifest button,.labx-desc,.labx-bar{transition:none}
  .labx-hint{animation:none}
}