/* site/assets/css/base.css */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

@keyframes dsmRevealUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
.dsm-no-transition, .dsm-no-transition * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}

img { max-width: 100%; }
::selection { background: rgba(0,173,239,.3); }

/* Keep autofilled fields visually identical to the rest of the form */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--fg-1);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
  box-shadow: 0 0 0 1000px var(--bg-2) inset;
  caret-color: var(--fg-1);
  transition: background-color 99999s ease-in-out 0s;
}

/* ---- Semantic type classes ---- */
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-cyan);
}
.ds-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}
h1, .ds-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}
h2, .ds-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}
h3, .ds-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}
h4, .ds-h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}
p, .ds-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
}
.ds-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-body); color: var(--fg-2); }
.ds-small { font-family: var(--font-sans); font-size: var(--t-small); line-height: 1.5; color: var(--fg-3); }
.ds-metric {
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.ds-label {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ds-gradient-text {
  background: var(--grad-cyan);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mono { font-family: var(--font-mono); font-size: var(--t-small); }

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

/* ---- Reveal-on-scroll entrance. Content is visible without JS (progressive
   enhancement) — [data-reveal].is-visible only ADDS an entrance animation
   once interactions.js's IntersectionObserver fires. ---- */
[data-reveal] { opacity: 1; }
[data-reveal].is-visible {
  animation: dsmRevealUp .7s cubic-bezier(.22,1,.36,1) both;
}