/* ============================================================================
   1VisionHub — Base Stylesheet (v1.0.0)
   Reset + typography defaults + layout primitives + core interactive states.
   Import AFTER tokens.css.
   ============================================================================ */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'], ol[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }

/* Display type: Fraunces, weight 300, tight tracking */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: balance;
  line-height: 1.05;
  color: var(--color-text);
}

p, li, figcaption { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-interactive);
}

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

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

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}

@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;
  }
}

.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;
}

/* ============================================================
   Layout primitives
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-12));
}
.container--narrow  { max-width: var(--content-narrow); }
.container--default { max-width: var(--content-default); }
.container--ultra   { max-width: var(--content-ultra); }

section {
  position: relative;
  padding-block: clamp(var(--space-16), 9vw, var(--space-32));
}

/* ============================================================
   Typography helpers
   ============================================================ */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}

.lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 64ch;
  line-height: 1.55;
}

.text-muted  { color: var(--color-text-muted); }
.text-faint  { color: var(--color-text-faint); }
.text-accent { color: var(--accent); }

/* Display: use inside h1/h2 to style with brand rules
   <h1 class="text-display">Human transformation <em>for the age of AI.</em></h1> */
.text-display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.0;
}
.text-display em {
  font-style: italic;
  color: var(--accent-bright, var(--accent));
  font-weight: 300;
}

/* Gradient italic helper — use for the ONE italic phrase in a hero */
.italic-gradient {
  font-style: italic;
  background: linear-gradient(120deg, var(--accent-bright) 0%, var(--accent) 60%, var(--color-text) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tri-color gradient — for the master brand headline moments */
.italic-tri {
  font-style: italic;
  background: linear-gradient(120deg, var(--pillar-individual-bright), var(--pillar-team-bright), var(--pillar-org-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   Motion — scroll reveal (opt-in)
   Add class .js-anim to <html> when JS boots; without JS, content stays visible.
   ============================================================ */
.js-anim [data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}
.js-anim [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-animate][data-delay="1"] { transition-delay: 80ms; }
[data-animate][data-delay="2"] { transition-delay: 160ms; }
[data-animate][data-delay="3"] { transition-delay: 240ms; }
[data-animate][data-delay="4"] { transition-delay: 320ms; }
[data-animate][data-delay="5"] { transition-delay: 400ms; }

@keyframes vh-slow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.02); }
}
@keyframes vh-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Grain overlay — apply once at the top of <body>: <div class="grain"></div>
   ============================================================ */
.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* ============================================================
   Aurora ambient layer — apply inside a positioned section
     <section style="position:relative; isolation:isolate;">
       <div class="aurora-bg"></div>
       <div class="section-inner"> ... </div>
     </section>
   ============================================================ */
.aurora-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--accent-aurora);
  filter: blur(40px);
  opacity: 0.75;
  z-index: 0;
}
.aurora-bg--soft { opacity: 0.4; }
.section-inner   { position: relative; z-index: 1; }