/* === Attest — Base Styles === */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  background:
    radial-gradient(circle at 78% -10%, rgba(110, 224, 181, 0.08), transparent 29rem),
    linear-gradient(180deg, var(--color-canvas) 0%, var(--color-base) 38rem);
  background-color: var(--color-base);
  overflow-x: hidden;
}

/* ── Selection ── */
::selection {
  background: var(--color-accent-strong);
  color: var(--color-base);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  box-shadow: var(--shadow-focus);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-base);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-accent);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container--narrow {
  max-width: var(--container-narrow);
}
.container--wide {
  max-width: var(--container-wide);
}

/* ── Typography ── */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-text);
}
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--color-text);
}
.display-sm {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}
.body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}
.caption {
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.label--accent {
  color: var(--color-accent);
}

/* ── Text Colors ── */
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-accent    { color: var(--color-accent); }
.text-muted     { color: var(--color-text-muted); }

/* ── Section Spacing ── */
.section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  position: relative;
}
.section--compact {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}
.section--flush {
  padding-top: 0;
  padding-bottom: 0;
}

.surface-glass {
  background: var(--surface-glass);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.surface-glass--strong {
  background: var(--surface-glass-strong);
}
.telemetry-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ── Utility ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Reveal Animations ── */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out),
              filter var(--duration-reveal) var(--ease-out);
  filter: blur(4px);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.reveal--delay-1 { transition-delay: 40ms; }
.reveal--delay-2 { transition-delay: 80ms; }
.reveal--delay-3 { transition-delay: 120ms; }
.reveal--delay-4 { transition-delay: 160ms; }
.reveal--delay-5 { transition-delay: 200ms; }

/* Fade only — no movement */
.reveal--fade {
  transform: none;
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out),
              filter var(--duration-slow) var(--ease-out);
}
.reveal-stagger.is-visible > *:nth-child(1) { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 40ms; }
.reveal-stagger.is-visible > *:nth-child(3) { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(4) { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 120ms; }
.reveal-stagger.is-visible > *:nth-child(5) { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(6) { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 200ms; }
.reveal-stagger.is-visible > *:nth-child(7) { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(8) { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 260ms; }

/* Line-by-line text reveal */
.text-reveal-line {
  overflow: hidden;
}
.text-reveal-line span {
  display: block;
  opacity: 0;
  transform: translateY(20%);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out),
              filter var(--duration-slow) var(--ease-out);
  filter: blur(3px);
}
.text-reveal-line.is-visible span {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}