/* =============================================================================
   base.css — reset, typography, ambient background, shared utilities.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--sp-6));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--plane);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: -0.006em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-snug); letter-spacing: -0.022em; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

/* `hidden` must beat any component's own display value (drawer, dropzone,
   chips) — otherwise a hidden overlay keeps swallowing pointer events. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--accent-soft); color: var(--ink-1); }

/* Scrollbars ---------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Icons --------------------------------------------------------------------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.icon--accent { color: var(--accent); }
:root[data-theme="dark"] .icon--dark-only,
:root[data-theme="light"] .icon--light-only { display: none; }

/* Typographic helpers ------------------------------------------------------- */
.eyebrow {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--rule { display: flex; align-items: center; gap: var(--sp-3); }
.eyebrow--rule::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.numeric { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* Ambient background -------------------------------------------------------- */
.ambient {
  position: fixed;
  inset: 0;
  z-index: var(--z-ambient);
  pointer-events: none;
  overflow: hidden;
}
.ambient__grain {
  position: absolute;
  inset: 0;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.16;
  animation: orb-drift 18s var(--ease-in-out) infinite;
}
.ambient__orb--violet { width: 460px; height: 460px; background: var(--violet-500); top: -160px; left: 8%; }
.ambient__orb--indigo { width: 540px; height: 540px; background: #1e3a8a; right: -220px; top: 22%; animation-delay: -6s; }
.ambient__orb--cyan   { width: 380px; height: 380px; background: var(--cyan-400); left: 22%; bottom: -220px; animation-delay: -11s; }

:root[data-theme="light"] .ambient__orb { opacity: 0.1; }
:root[data-theme="light"] .ambient__grain { opacity: 0.03; }

@keyframes orb-drift {
  50% { transform: translate3d(42px, 36px, 0) scale(1.1); }
}

/* Reveal-on-scroll ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Loading: hold the previous render at reduced opacity — never a skeleton
   flash, never a layout jump. */
.content[data-state="loading"] { opacity: 0.55; filter: saturate(0.6); pointer-events: none; }
.content { transition: opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}