/* ============================================================
   BASE.CSS — Allies
   Variables · Reset · Typography · Noise · Entrance animations
   ============================================================ */

/* ── Custom properties ────────────────────────────────────── */
:root {
  /* Brand palette */
  --c-bg:           #0a0a0f;
  --c-bg-deep:      #060608;
  --c-layer:        #0f1053;
  --c-layer-2:      rgba(15, 16, 83, 0.4);
  --c-primary:      #1A2BC3;
  --c-primary-glow: rgba(26, 43, 195, 0.28);
  --c-accent:       #A6D8FD;
  --c-accent-dim:   rgba(166, 216, 253, 0.07);
  --c-accent-mid:   rgba(166, 216, 253, 0.15);

  /* Text */
  --c-text:         #dddded;
  --c-text-muted:   #8080a0;
  --c-text-dim:     #404055;
  --c-white:        #ffffff;

  /* Borders */
  --c-border:       rgba(166, 216, 253, 0.07);
  --c-border-h:     rgba(166, 216, 253, 0.18);

  /* Fonts */
  --font-display:   'Cal Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:      'Plus Jakarta Sans', 'Helvetica Neue', system-ui, sans-serif;

  /* Layout */
  --section-v:      clamp(88px, 11vw, 148px);
  --content-max:    1160px;
  --content-wide:   1400px;
  --gutter:         clamp(20px, 5vw, 80px);

  /* Motion */
  --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-fluid:     cubic-bezier(0.32, 0.72, 0, 1);
  --dur-xs:         140ms;
  --dur-sm:         220ms;
  --dur-md:         360ms;
  --dur-lg:         520ms;
  --dur-xl:         720ms;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-text);
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(26, 43, 195, 0.11) 0%, transparent 62%),
    radial-gradient(ellipse 50% 35% at 90% 100%, rgba(166, 216, 253, 0.04) 0%, transparent 55%),
    var(--c-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

:focus-visible {
  outline: 2px solid rgba(166, 216, 253, 0.6);
  outline-offset: 3px;
  border-radius: 4px;
}

img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font-family: inherit; color: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font-family: inherit; }

/* ── Noise grain overlay ──────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: grain 0.75s steps(1) infinite;
}

@keyframes grain {
  0%   { background-position:   0px   0px; }
  10%  { background-position: -50px -100px; }
  20%  { background-position: -150px  50px; }
  30%  { background-position:  60px -120px; }
  40%  { background-position: -80px  150px; }
  50%  { background-position: 120px  -30px; }
  60%  { background-position: -100px  80px; }
  70%  { background-position:  30px  120px; }
  80%  { background-position:  170px -60px; }
  90%  { background-position: -40px  -80px; }
  100% { background-position:  90px   30px; }
}

/* ── Typography system ────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-white);
  line-height: 1.05;
  letter-spacing: -0.016em;
}

.display-2xl {
  font-size: clamp(56px, 9vw, 130px);
  letter-spacing: -0.022em;
  line-height: 0.93;
}
.display-xl {
  font-size: clamp(44px, 7vw, 96px);
  letter-spacing: -0.020em;
  line-height: 0.97;
}
.display-lg {
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: -0.016em;
  line-height: 1.02;
}
.display-md {
  font-size: clamp(28px, 3.5vw, 52px);
  letter-spacing: -0.014em;
  line-height: 1.08;
}
.display-sm {
  font-size: clamp(22px, 2.5vw, 36px);
  letter-spacing: -0.012em;
  line-height: 1.15;
}

.prose-xl {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.7;
  color: var(--c-text-muted);
  font-weight: 400;
}
.prose-lg {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.72;
  color: var(--c-text-muted);
  font-weight: 400;
}
.prose-md {
  font-size: 16px;
  line-height: 1.68;
  color: var(--c-text-muted);
  font-weight: 400;
}
.prose-sm {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-dim);
  font-weight: 400;
}

.label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.85;
}

/* ── Layout ───────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-wide {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section {
  padding: var(--section-v) 0;
}
.section-sm {
  padding: calc(var(--section-v) * 0.6) 0;
}

/* ── Dividers ─────────────────────────────────────────────── */
.rule {
  width: 100%;
  height: 1px;
  background: var(--c-border);
  border: none;
}

/* Adjacent sections auto-separate without needing HR elements */
.section + .section,
.section-sm + .section,
.section + .section-sm {
  border-top: 1px solid var(--c-border);
}

/* ── Page transition ──────────────────────────────────────── */
#main {
  transition: opacity var(--dur-md) var(--ease-out);
}
#main.is-fading {
  opacity: 0;
  pointer-events: none;
}

/* ── Entrance animations (IntersectionObserver) ───────────── */

/* Default: cinematic fade + rise + depth-of-field blur */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(5px);
  transition:
    opacity   var(--dur-xl)  var(--ease-fluid),
    transform var(--dur-xl)  var(--ease-fluid),
    filter    560ms          var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Fade only — labels, small text */
[data-reveal="fade"] {
  opacity: 0;
  transform: none;
  filter: none;
  transition: opacity 560ms var(--ease-fluid);
}
[data-reveal="fade"].is-visible {
  opacity: 1;
}

/* Directional variants */
[data-reveal="left"],
[data-reveal="right"] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(5px);
  transition:
    opacity   var(--dur-xl)  var(--ease-fluid),
    transform var(--dur-xl)  var(--ease-fluid),
    filter    560ms          var(--ease-out);
}
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Stagger delays */
[data-delay="1"]  { transition-delay: 80ms; }
[data-delay="2"]  { transition-delay: 160ms; }
[data-delay="3"]  { transition-delay: 260ms; }
[data-delay="4"]  { transition-delay: 360ms; }
[data-delay="5"]  { transition-delay: 460ms; }
[data-delay="6"]  { transition-delay: 560ms; }
[data-delay="7"]  { transition-delay: 660ms; }

/* ── Utility ──────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.text-accent   { color: var(--c-accent); }
.text-white    { color: var(--c-white); }
.text-muted    { color: var(--c-text-muted); }
.text-dim      { color: var(--c-text-dim); }
.font-display  { font-family: var(--font-display); }

/* Gradient text — used on hero accent words and mission emphasis */
.text-gradient,
.text-gradient-accent {
  background: linear-gradient(135deg, #A6D8FD 0%, #cce9ff 55%, #eaf6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Mobile: strip expensive blur filter from scroll reveals ── */
/* Blur recompositing during scroll is a top-tier battery and jank drain on mobile GPUs */
@media (pointer: coarse) {
  [data-reveal],
  [data-reveal="left"],
  [data-reveal="right"] {
    filter: none;
    transition:
      opacity   var(--dur-xl)  var(--ease-fluid),
      transform var(--dur-xl)  var(--ease-fluid);
  }
  [data-reveal].is-visible,
  [data-reveal="left"].is-visible,
  [data-reveal="right"].is-visible {
    filter: none;
  }
}

/* ── Reduced motion: disable decorative animations, preserve interactive feedback ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
  /* Restore short transition on interactive elements so hover/focus feedback still works */
  .btn,
  .nav-link,
  .nav-cta,
  .nav-dropdown-trigger,
  .nav-dropdown-item,
  .footer-col-links a {
    transition-duration: 150ms !important;
  }
  [data-reveal],
  [data-reveal="fade"],
  [data-reveal="left"],
  [data-reveal="right"] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Tabular figures for stat numbers */
.num-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}