/* ADDX 3D World hero — scoped add-on that plugs the WebGL world into the Noir theme */
.hero-media.world{background:#04060c}
.hero-media.world canvas{cursor:grab;touch-action:pan-y}
.hero-media.world canvas:active{cursor:grabbing}
/* lighter veil than the default noir one, so the city stays visible under the copy */
.hero-media.world::after{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(8,9,10,.10) 0%, rgba(8,9,10,.42) 55%, rgba(8,9,10,.92) 100%),
    linear-gradient(180deg, rgba(8,9,10,.68) 0%, rgba(8,9,10,.10) 34%, rgba(8,9,10,.9) 100%);
}
.hero-media.no-webgl canvas{display:none}
.hero-media.no-webgl{background:
  radial-gradient(60% 50% at 62% 70%, rgba(34,211,238,.16), transparent 70%),
  radial-gradient(40% 30% at 70% 55%, rgba(244,113,181,.14), transparent 70%),
  linear-gradient(#050506, #0a0d16)}

.hud{position:absolute;right:20px;bottom:20px;z-index:2;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.hud-row{display:flex;gap:8px}
.hud-btn{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-soft);background:rgba(8,9,10,.55);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;padding:9px 14px;cursor:pointer;transition:all .15s ease}
.hud-btn:hover{color:var(--ink);border-color:rgba(255,255,255,.25)}
.hud-btn.on{color:#0a0a0b;background:var(--accent);border-color:var(--accent)}
.hud-hint{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-dim);background:rgba(8,9,10,.5);padding:5px 10px;border-radius:8px;border:1px solid var(--line-soft)}

.scroll-cue{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:2;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;color:var(--ink-dim);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:6px}
.scroll-cue::after{content:'';width:1px;height:30px;background:linear-gradient(var(--brass),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

@media (max-width:720px){
  .hud{right:12px;bottom:12px}
}