/* ===================================================================
   Home — smoke layer (pairs with smoke.js; colours come from home.css).
   A fixed canvas drifts smoke over the page. Text marked [data-smoke]
   is drawn by that canvas so the smoke can dissolve it.
   =================================================================== */

/* Above the page content, below the project overlay (200+) and nav (600).
   Never takes pointer events. */
#smoke {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 150;
}

/* No text selection while a stroke is being drawn. */
body.smoke-dragging {
  -webkit-user-select: none;
  user-select: none;
}

/* While smoke is acting on a [data-smoke] element, smoke.js marks it
   .smoke-live and draws it in the canvas instead, so it can dissolve. The
   rest of the time it is ordinary DOM text. */
[data-smoke].smoke-live { color: transparent; }
.hero h1.smoke-live em { -webkit-text-stroke-color: transparent; }

/* ---------------- THEME TOGGLE (nav) ---------------- */
.theme-toggle {
  padding: 9px 14px;
  border: 1px solid var(--nav-fg-dim);
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--nav-fg);
  font-family: var(--font-body, sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--duration-fast, 0.2s) ease;
}
.theme-toggle:hover { border-color: var(--nav-fg); }
.theme-toggle:focus-visible { outline: 2px solid var(--nav-fg); outline-offset: 3px; }
body.scroll-locked .theme-toggle { display: none; }
@media (max-width: 760px) { .theme-toggle { padding: 7px 11px; font-size: 0.76rem; } }

/* ---------------- TUNING PANEL (?controls) ---------------- */
.smoke-panel {
  position: fixed;
  z-index: 650;
  top: calc(var(--nav-h, 64px) + 8px);
  right: clamp(16px, 3vw, 40px);
  width: min(280px, calc(100vw - 32px));
  max-height: calc(100vh - var(--nav-h, 64px) - 32px);
  overflow-y: auto;
  padding: 16px;
  display: grid;
  gap: 12px;
  font-family: var(--font-body, sans-serif);
  font-size: 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl, 16px);
  cursor: default;
}
.smoke-panel[hidden] { display: none; }
.smoke-panel label { display: grid; gap: 4px; }
.smoke-panel .row {
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.smoke-panel output { color: var(--muted); font-variant-numeric: tabular-nums; }
.smoke-panel input[type="range"] { width: 100%; margin: 0; accent-color: var(--ink); cursor: pointer; }
.smoke-panel h3 {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.smoke-panel label.inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.smoke-panel select,
.smoke-panel .toggle {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 8px);
  padding: 5px 8px;
  cursor: pointer;
}
.smoke-panel .toggle {
  padding: 8px 14px;
  border-radius: var(--radius-pill, 999px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.smoke-panel input[type="color"] {
  width: 44px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 8px);
  background: none;
  cursor: pointer;
}