/* ============================================================
   global.css — shared resets, typography base, reveal utilities
   Loaded by every v3 page first (before any other CSS).
   ============================================================ */

/* Tinted neutrals — never pure black/white (impeccable shared law).
   HEX fallback first, OKLCH overrides for capable browsers. */
:root {
  --c-white: #FCFDFF;
  --c-black: #060914;
}
@supports (color: oklch(0 0 0)) {
  :root {
    --c-white: oklch(0.99 0.005 250);
    --c-black: oklch(0.10 0.010 264);
  }
}

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

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

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1d1d1f;
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4.5vw, 64px);
}

/* Reveal utility shared by all concepts */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1),
              transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.in { opacity: 1; transform: none; }

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

::selection { background: #1E63E9; color: var(--c-white); }