/* ════════════════════════════════════════
   BASE — merged design tokens + global reset

   V1 sections: Nav, Hero, Ticker, Journey,
                Final CTA, Footer
   V2 sections: Alumni/Stories, Programmes,
                Why MCAS

   Each token set uses different variable names
   so there are no conflicts.
════════════════════════════════════════ */

/* ── V1 tokens ── */
:root {
  --navy:        #0d1b5e;
  --navy-deep:   #080f3a;
  --navy-mid:    #16257a;
  --purple:      #4a0d8f;
  --purple-mid:  #5e14b0;
  --red:         #e83e31;
  --red-light:   #ff5547;
  --mist:        #efefef;
  --mist-mid:    #e2e2ec;
  --white:       #ffffff;
  --ink:         #0a0a1a;
  --ink-mid:     #2a2a4a;
  --ink-mute:    #6b6b90;

  --f-display:  'Playfair Display', Georgia, serif;
  --f-head:     'Barlow Condensed', sans-serif;
  --f-body:     'Inter', sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── V2 tokens ── */
  --navy-dark:  #080f38;
  --navy-glow:  #1a2e8a;
  --purple-lit: #6b1fd0;
  --red-warm:   #ff5040;
  --mist-warm:  #f5f4fa;
  --ink2:        #09090f;
  --ink2-50:     rgba(9,9,15,0.5);
  --ink2-25:     rgba(9,9,15,0.25);

  --serif:   'DM Serif Display', Georgia, serif;
  --sans:    'DM Sans', system-ui, sans-serif;
  --mono:    'Space Grotesk', monospace;

  --r: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Global reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--white);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ── V1 reveal system (Nav/Hero/Ticker/Journey/FinalCTA/Footer)
   Uses class-based animation: .hero-reveal etc.
   JS adds data-reveal value as a class (e.g. "hero-in") ── */
.hero-reveal,
.journey-reveal,
.fcta-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.hero-reveal.hero-delay-1,
.journey-reveal.journey-delay-1,
.fcta-reveal.fcta-delay-1 { transition-delay: 0.1s; }
.hero-reveal.hero-delay-2,
.journey-reveal.journey-delay-2,
.fcta-reveal.fcta-delay-2 { transition-delay: 0.2s; }
.hero-reveal.hero-delay-3,
.journey-reveal.journey-delay-3,
.fcta-reveal.fcta-delay-3 { transition-delay: 0.3s; }
.hero-reveal.hero-in,
.journey-reveal.journey-in,
.fcta-reveal.fcta-in { opacity: 1; transform: none; }

/* ── V2 reveal system (Alumni/Programmes/Why MCAS)
   Uses attribute selectors: [data-reveal]
   JS adds dataset.in value as a class (e.g. "stories-visible") ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--r), transform 0.9s var(--r);
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].stories-visible,
[data-reveal].prog-visible,
[data-reveal].why-visible { opacity: 1; transform: none; }