/* ROC Labs — Three.js depth gallery + HUD overlay. */
html,body{overflow:hidden}
.labs-gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;background:#14121c;cursor:grab}
.labs-gl:active{cursor:grabbing}

.labs-ui{position:fixed;inset:0;z-index:3;pointer-events:none}
.labs-brand{position:absolute;top:24px;left:clamp(18px,4vw,54px);font:700 12px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--cream)}
.labs-brand span{color:var(--cyan)}

/* focused item block, lower-left, Ray Gun scale + glitch */
.labs-focus{position:absolute;left:clamp(18px,4vw,54px);bottom:clamp(70px,12vh,120px);max-width:min(70vw,760px)}
.labs-focus-year{font:700 14px/1 var(--mono);letter-spacing:.24em;color:var(--mag);margin:0 0 10px;transform:rotate(-2deg);display:inline-block}
.labs-focus-title{position:relative;margin:0;font-family:var(--serif);font-weight:900;
  font-size:clamp(38px,7vw,110px);line-height:.86;letter-spacing:-.03em;color:var(--cream);text-wrap:balance;
  animation:rgAberrate 3.4s ease-in-out infinite}
@keyframes rgAberrate{
  0%,100%{text-shadow:-3px 0 rgba(255,0,140,.7), 3px 0 rgba(0,240,255,.7)}
  25%{text-shadow:-5px 1px rgba(255,0,140,.8), 4px -1px rgba(0,240,255,.8), 2px 2px rgba(202,255,0,.5)}
  50%{text-shadow:2px 0 rgba(255,0,140,.65), -4px 0 rgba(0,240,255,.65), -2px 1px rgba(61,123,255,.5)}
  75%{text-shadow:-4px -1px rgba(255,0,140,.8), 5px 1px rgba(0,240,255,.8)}
}
@media (prefers-reduced-motion: reduce){.labs-focus-title{animation:none}}
.labs-focus-deck{margin:16px 0 0;max-width:46ch;font:italic 400 clamp(14px,1.5vw,19px)/1.4 var(--read);color:rgba(239,233,220,.82)}
.labs-focus-link{pointer-events:auto;display:inline-block;margin-top:18px;font:700 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--void);background:var(--acid);padding:11px 16px;transform:rotate(-1.5deg);transition:background .18s}
.labs-focus-link:hover{background:var(--cream)}

.labs-scrollcue{position:absolute;top:26px;right:clamp(18px,4vw,54px);font:400 14px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(239,233,220,.5);transition:opacity .4s}
.labs-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(239,233,220,.12)}
.labs-progress i{display:block;height:100%;width:0;background:var(--acid);transition:width .12s linear}

.labs--fallback{position:relative;z-index:2;color:#efe9dc;padding:12vh 8vw}
.labs--fallback a{color:#eaff00}

/* Right-hand rail — signals there's more past the first piece */
.labs-rail{position:absolute;top:50%;right:clamp(14px,2.4vw,34px);transform:translateY(-50%);
  display:flex;flex-direction:column;gap:2px;max-height:72vh;overflow:auto;pointer-events:auto;
  scrollbar-width:none;text-align:right}
.labs-rail::-webkit-scrollbar{display:none}
.labs-rail-item{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;background:none;border:0;cursor:pointer;
  padding:3px 0;color:rgba(239,233,220,.42);transition:color .18s;max-width:min(30vw,320px)}
.labs-rail-item .n{font:700 9px/1 var(--mono);letter-spacing:.1em;color:var(--mag);opacity:.7}
.labs-rail-item .t{font:400 13px/1.15 var(--read);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.labs-rail-item:hover{color:var(--cream)}
.labs-rail-item.on{color:var(--cream)}
.labs-rail-item.on .t{font-style:italic}
.labs-rail-item.on .n{opacity:1;color:var(--acid)}

/* Scroll-to-navigate intro on load */
.labs-intro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity .5s ease,transform .5s ease}
.labs-intro.off{opacity:0;transform:translate(-50%,-40%);pointer-events:none}
.labs-intro span{font:700 clamp(14px,1.6vw,20px)/1 var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--cream)}
.labs-intro i{font-style:normal;font-size:24px;color:var(--acid);animation:labsBob 1.4s ease-in-out infinite}
@keyframes labsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media (prefers-reduced-motion: reduce){.labs-intro i{animation:none}}
@media(max-width:640px){.labs-rail{display:none}}


/* v5.31 editor integration */
.rd-labs-builder-preview{
  position:relative;
  min-height:100vh;
  padding:120px clamp(24px,6vw,96px) 140px;
  overflow:hidden;
  color:var(--cream);
  background:#111019;
}
.rd-labs-builder-backdrop{
  position:absolute;
  inset:0;
  opacity:.55;
  background:
    radial-gradient(circle at 22% 30%,rgba(24,219,230,.18),transparent 30%),
    radial-gradient(circle at 72% 60%,rgba(255,90,169,.2),transparent 34%),
    linear-gradient(135deg,#111019,#08080c);
}
.rd-labs-builder-content{position:relative;z-index:2}
.rd-labs-builder-note{
  display:flex;
  gap:16px;
  justify-content:space-between;
  margin-top:56px;
  padding:18px 20px;
  border:1px solid rgba(243,239,231,.28);
  color:rgba(243,239,231,.78);
  font:600 14px/1.45 var(--mono);
}
.rd-labs-builder-note strong{color:var(--acid)}
.labs-empty{
  position:relative;
  z-index:2;
  color:#efe9dc;
  padding:22vh 8vw;
}
.labs-empty a{color:var(--acid)}
.rd-labs-editor-intro{
  position:fixed;
  z-index:4;
  left:clamp(24px,4vw,64px);
  top:clamp(88px,10vh,128px);
  max-width:min(620px,56vw);
  pointer-events:auto;
}
.rd-labs-editor-intro .elementor,
.rd-labs-editor-intro .e-con{width:100%;max-width:none}
