/* ============================================================
   LUMIX BAR — Experiência (WebGL hero) + Controlador mobile
   Near-black chrome. The LED light is the only colour. Monochrome UI.
   Extends the tokens in base.css. ============================================================ */

.lxp {
  --ink: #ffffff;
  --ink-2: rgba(255,255,255,0.62);
  --ink-3: rgba(255,255,255,0.38);
  --line: rgba(255,255,255,0.12);
  --line-2: rgba(255,255,255,0.22);
  --surf: rgba(255,255,255,0.05);
  --surf-2: rgba(255,255,255,0.09);
  --glass: rgba(10,10,12,0.88);
  --bg: #050506;
  background: var(--bg);
  color: var(--ink);
  min-height: 100%;
}

/* ---------------- shared WebGL stage ---------------- */
/* Native scroll ONLY on the WebGL/scrub pages. base.css sets scroll-behavior:smooth
   site-wide (nice for anchor jumps on the doc pages), but on a pinned, scrubbed
   1000vh timeline the browser's smooth-scroll animates every wheel tick over
   hundreds of ms and fights ScrollTrigger's scrub — the exact "stuck / frozen"
   feel. Force instant native scroll here so the timeline tracks the wheel 1:1. */
html { scroll-behavior: auto !important; }
/* width/height:100% is REQUIRED, not cosmetic: the renderer draws into a buffer
   smaller than the viewport (RENDER_SCALE) with updateStyle=false, so without an
   explicit CSS size the canvas would lay out at its (small) buffer size and leave
   a gap. Forcing 100% stretches the low-res buffer up to fill the screen. */
#stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; touch-action: pan-y; }
/* Long scroll driver: much taller than before (2000vh vs 1000vh) so every stage
   of the narrative gets generous scroll room and a small scroll produces a small,
   smooth change instead of jumping between animations. */
#scroll-space { position: relative; z-index: 0; height: 2000vh; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #scroll-space { height: 100vh; } }

.hud { position: fixed; z-index: 20; pointer-events: none; }
.hud > * { pointer-events: auto; }

/* ---------------- loader (branded cover for the heavy 3D boot) ----------------
   Full-screen, near-black, monochrome UI with a single LED-colour accent: a
   hue-cycling LED "mark" over the Lumx wordmark and an RGB progress line that
   evokes the strip itself. Shown on first paint, faded once the GLB is parsed
   AND the first WebGL frame has rendered (see experiencia.js), with a timeout
   fallback so it can never get stuck. */
#loader { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: #050505; transition: opacity 0.7s var(--ease); }
#loader .ld-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* the LED mark — a glowing dot that walks the RGB / warm / cool / UV palette */
#loader .ld-mark { width: 14px; height: 14px; border-radius: 50%; background: #fff;
  animation: ldhue 3.6s linear infinite; }
#loader .lm { font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  letter-spacing: -0.03em; margin-top: 1.1rem; line-height: 1; }
#loader .lm .ld-sub { color: rgba(255,255,255,0.42); font-weight: 500; margin-left: 0.4rem; }
#loader .ld-bar { position: relative; width: 220px; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,0.10); overflow: hidden; margin: 1.5rem auto 0; }
#loader .ld-bar i { position: absolute; inset: 0 auto 0 0; width: 42%; border-radius: 3px;
  background: linear-gradient(90deg,#ff3b6b,#ffd23b,#3bff8f,#3bc9ff,#b23bff);
  animation: ldsweep 1.25s cubic-bezier(0.55,0,0.35,1) infinite; }
#loader .pct { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.42); margin-top: 0.9rem; }
@keyframes ldsweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(300%); } }
@keyframes ldhue {
  0%   { background: #ff3b6b; box-shadow: 0 0 26px 5px rgba(255,59,107,0.65); }
  25%  { background: #ffd23b; box-shadow: 0 0 26px 5px rgba(255,210,59,0.6); }
  50%  { background: #3bff8f; box-shadow: 0 0 26px 5px rgba(59,255,143,0.6); }
  75%  { background: #3bc9ff; box-shadow: 0 0 26px 5px rgba(59,201,255,0.6); }
  100% { background: #ff3b6b; box-shadow: 0 0 26px 5px rgba(255,59,107,0.65); }
}
@media (prefers-reduced-motion: reduce) {
  #loader .ld-mark, #loader .ld-bar i { animation: none; }
  #loader .ld-mark { box-shadow: 0 0 26px 5px rgba(59,201,255,0.55); }
}

/* ---------------- hero title ---------------- */
.hud-hero { top: 5.6rem; left: clamp(1rem,4vw,3.4rem); max-width: 30rem; }
.hud-hero .eyebrow { color: rgba(255,255,255,0.72); border-color: var(--line-2); background: var(--surf); }
.hud-hero h1 { font-size: clamp(2rem,1rem + 4.2vw,4rem); letter-spacing: -0.04em; margin-top: 0.9rem; line-height: 1.0; }
.hud-hero .lead { color: var(--ink-2); margin-top: 0.9rem; max-width: 26rem; }
.scroll-tip { margin-top: 1.4rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.scroll-tip .arw { width: 14px; height: 14px; animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------------- bottom caption ---------------- */
#hud-caption { bottom: 1.6rem; left: clamp(1rem,4vw,3.4rem); max-width: 26rem; }
#cap-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
#cap-head { font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); margin-top: 0.5rem; }
#cap-desc { color: var(--ink-2); font-size: 0.95rem; margin-top: 0.45rem; line-height: 1.5; }
.scroll-meter { margin-top: 1rem; width: min(240px,40vw); height: 2px; border-radius: 2px; background: rgba(255,255,255,0.14); overflow: hidden; }
.scroll-meter i { display: block; height: 100%; background: #fff; transform-origin: left center; transform: scaleX(0); }

/* ---------------- status pill ---------------- */
.status-pill { display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-2);
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.8rem; }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 0 transparent; }
.status-pill[data-s="connected"]::before { background: #3ddc84; box-shadow: 0 0 10px #3ddc84; }
.status-pill[data-s="connecting"]::before { background: #ffb765; }
.status-pill[data-s="disconnected"]::before { background: #ff4d5e; }

/* ---------------- control panel (hero, right side) ---------------- */
#panel { position: fixed; z-index: 30; top: 50%; right: clamp(0.8rem,2vw,1.6rem); transform: translateY(-50%);
  width: min(340px,90vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--glass); border: 1px solid var(--line); border-radius: 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.9rem 1rem 0.8rem 1.2rem; border-bottom: 1px solid var(--line); }
.panel-head .t { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.panel-body { padding: 1rem 1.1rem 1.2rem; overflow-y: auto; }
#panel-toggle { width: 1.9rem; height: 1.9rem; border-radius: 999px; flex: none; cursor: pointer;
  background: var(--surf); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; }
#panel-toggle svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease); }
#panel.collapsed .panel-body { display: none; }
#panel.collapsed #panel-toggle svg { transform: rotate(180deg); }

/* QR block inside panel */
.qr-card { display: flex; gap: 0.9rem; align-items: center; padding: 0.9rem; margin-bottom: 1rem;
  background: var(--surf); border: 1px solid var(--line); border-radius: 1rem; }
#qr { width: 82px; height: 82px; flex: none; background: #fff; border-radius: 0.6rem; padding: 6px; }
#qr svg { display: block; width: 100%; height: 100%; }
.qr-card .qt { font-size: 0.82rem; color: var(--ink-2); line-height: 1.45; }
.qr-card .qt b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 0.15rem; }
.qr-card .qt a { color: var(--ink-3); text-decoration: underline; word-break: break-all; font-size: 0.72rem; }

/* ---------------- shared control widgets ---------------- */
.lx-controls { display: flex; flex-direction: column; gap: 1.25rem; }
.lx-group { display: flex; flex-direction: column; gap: 0.6rem; }
.lx-legend { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }

.lx-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.lx-row { display: flex; align-items: center; gap: 0.6rem; text-align: left; cursor: pointer;
  padding: 0.6rem 0.7rem; border-radius: 0.9rem; background: var(--surf); border: 1px solid var(--line);
  color: var(--ink); transition: border-color 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease); }
.lx-row .lx-swatch { width: 14px; height: 14px; border-radius: 5px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset; }
.lx-row-txt { display: flex; flex-direction: column; line-height: 1.1; flex: 1; min-width: 0; }
.lx-row-name { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-row-sub { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-3); margin-top: 2px; }
.lx-row .lx-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: rgba(255,255,255,0.2);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.lx-row[aria-pressed="true"] { border-color: var(--line-2); background: var(--surf-2); }
.lx-row[aria-pressed="true"] .lx-dot { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.8); }
.lx-row[aria-pressed="false"] { opacity: 0.5; }
.lx-row[aria-pressed="false"] .lx-swatch { filter: grayscale(1) brightness(0.6); }

.lx-seg { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lx-seg-btn { flex: 1 1 auto; padding: 0.5rem 0.5rem; border-radius: 0.7rem; cursor: pointer;
  background: var(--surf); border: 1px solid var(--line); color: var(--ink-2);
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease); }
.lx-seg-btn:hover { color: var(--ink); }
.lx-seg-btn.on { background: #fff; color: #0a0a0a; border-color: #fff; }

.lx-color { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.5rem 0.7rem; border-radius: 0.8rem; background: var(--surf); border: 1px solid var(--line);
  font-size: 0.8rem; color: var(--ink-2); opacity: 0.55; transition: opacity 0.3s var(--ease); }
.lx-color.live { opacity: 1; }
.lx-color input[type="color"] { width: 42px; height: 28px; border: 1px solid var(--line-2); border-radius: 0.5rem;
  background: none; cursor: pointer; padding: 2px; }

.lx-slide-head { display: flex; align-items: baseline; justify-content: space-between; }
.lx-val { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink); }
.lx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,0.18); outline: none; cursor: pointer; }
.lx-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.5); cursor: pointer; }
.lx-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: none; cursor: pointer; }

/* ---------------- controller page ---------------- */
.ctl-body { min-height: 100dvh; display: flex; flex-direction: column; padding: 1.1rem 1.1rem 1.4rem; gap: 1.1rem; }
.ctl-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.ctl-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.5rem; }
.ctl-brand .spark { width: 8px; height: 8px; border-radius: 2px; background: currentColor; box-shadow: 0 0 0 3px var(--surf); }
.ctl-sub { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--ink-3); margin-top: 0.2rem; }
.ctl-sub b { color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.12em; }
.ctl-summary { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-2);
  padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--surf); text-align: center; }
.ctl-card { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 1.3rem; padding: 1.2rem 1.1rem; }
.ctl-foot { margin-top: auto; text-align: center; font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-3); }
.ctl-body .lx-rows { grid-template-columns: 1fr 1fr; }
.ctl-body .lx-row { padding: 0.85rem 0.8rem; }         /* bigger tap targets */
.ctl-body .lx-seg-btn { padding: 0.7rem 0.5rem; font-size: 0.82rem; }
.ctl-body .lx-range { height: 6px; }
.ctl-body .lx-range::-webkit-slider-thumb { width: 26px; height: 26px; }
.ctl-body .lx-range::-moz-range-thumb { width: 26px; height: 26px; }
.ctl-body .lx-controls { gap: 1.5rem; }

/* ---------------- responsive ---------------- */
@media (max-width: 760px) {
  .hud-hero { top: 5rem; max-width: 88vw; }
  #hud-caption { max-width: 78vw; bottom: 1rem; }
  #panel { top: auto; bottom: 0.8rem; right: 50%; transform: translateX(50%); width: calc(100% - 1.6rem); max-height: 70vh; }
  #panel.collapsed { width: max-content; }
}