/* Reset everything Wails react-template ships by default — Classic component
 * draws the entire surface, including the title bar. */

html, body, #app, #root {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1c1d20;
  color: #dde0e6;
  font-family:
    "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
    BlinkMacSystemFont, sans-serif;
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-align: left;
}

* {
  box-sizing: border-box;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ─── Theme switch: circle reveal from the cursor ──────────────────────── */
/* The title-bar sun/moon button calls document.startViewTransition() before
 * flipping the mode state; the API snapshots the old DOM, runs the React
 * update, and gives us pseudo-elements `::view-transition-old(root)` and
 * `::view-transition-new(root)` to animate between. We override the default
 * cross-fade with a circular clip-path expanding from --reveal-x/y, which
 * is set to the click coordinates by App.jsx right before the transition. */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* The new state expands from a tiny circle at the cursor into the whole
 * window. The old state stays put underneath. 0.45s feels lively without
 * dragging — long-form circle reveals (>700ms) start to feel laggy. */
::view-transition-new(root) {
  animation: theme-reveal 0.45s ease-out forwards;
}

::view-transition-old(root) {
  animation: none;
  z-index: 0;
}

::view-transition-new(root) {
  z-index: 1;
}

@keyframes theme-reveal {
  from { clip-path: circle(0% at var(--reveal-x, 50%) var(--reveal-y, 50%)); }
  to   { clip-path: circle(150% at var(--reveal-x, 50%) var(--reveal-y, 50%)); }
}
