/* parallax.css
   Immersive mode (head tracking) button and note.
   Loaded by index.html (order matters). */

/* ============================================================
   PARALLAX (immersive mode) — settings in PARALLAX_FX config
   ============================================================ */
.lc-plx {
  position: absolute; left: 20px; bottom: 20px; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  font: 500 11px/1.3 "Barlow", system-ui, sans-serif; letter-spacing: 0.2em;
  color: rgba(242, 242, 238, 0.72);
  opacity: 0; transition: opacity 600ms ease; pointer-events: none;
}
.lc-plx.is-visible { opacity: 1; pointer-events: auto; }
.lc-plx button {
  font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .2); padding: 9px 14px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.lc-plx button:hover { border-color: rgba(255, 255, 255, .5); }
.lc-plx .lc-plx-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35); }
.lc-plx.is-on .lc-plx-dot { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }
.lc-plx .lc-plx-note { letter-spacing: 0.08em; font-size: 10px; opacity: 0.6; max-width: 280px; text-transform: none; }
.lc-plx.is-on .lc-plx-note { display: none; }
@media (max-width: 700px) { .lc-plx .lc-plx-note { display: none; } }