/* ================================================================
   RyanMorin.ca — Global base styles, animations, responsive
================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ground);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
::selection { background: rgba(188,190,192,.18); }
input, textarea, button, select { font-family: inherit; }
img { max-width: 100%; }
p { text-wrap: pretty; }

/* ── Hero entrance — CSS keyframes, JS-independent ── */
@keyframes fadeRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero-animate {
  animation: fadeRise 600ms cubic-bezier(.22,1,.36,1) both;
}
.hero-animate.d1 { animation-delay: 90ms; }
.hero-animate.d2 { animation-delay: 200ms; }
.hero-animate.d3 { animation-delay: 320ms; }
.hero-animate.d4 { animation-delay: 440ms; }

/* ── Scroll reveal — gated on js-ready so content always shows without JS ── */
body.js-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms cubic-bezier(.22,1,.36,1), transform 520ms cubic-bezier(.22,1,.36,1);
}
body.js-ready .reveal.vis { opacity: 1; transform: none; }
.reveal.d1 { transition-delay:  90ms; }
.reveal.d2 { transition-delay: 180ms; }
.reveal.d3 { transition-delay: 280ms; }
.reveal.d4 { transition-delay: 380ms; }

@media (prefers-reduced-motion: reduce) {
  .hero-animate { animation: none; opacity: 1; transform: none; }
  body.js-ready .reveal,
  body.js-ready .reveal.vis { opacity: 1; transform: none; transition: none; }
}

/* ── Smooth scroll + anchor offset for fixed nav ── */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* ── Wide-screen content cap ── */
@media (min-width: 1500px) {
  section.rm-section, footer.rm-section {
    padding-left: max(56px, calc((100vw - 1440px) / 2)) !important;
    padding-right: max(56px, calc((100vw - 1440px) / 2)) !important;
  }
}

/* ── Nav layout ── */
.nav-links { display: flex; align-items: center; }
.nav-burger { display: none !important; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .nav-links  { display: none !important; }
  .nav-burger { display: flex !important; }

  .rm-section { padding-left: 24px !important; padding-right: 24px !important; }

  /* Hero */
  .hero-section { min-height: auto !important; padding: 100px 24px 64px !important; }

  /* Grids */
  .caps-grid          { grid-template-columns: 1fr !important; }
  .numbers-grid       { grid-template-columns: 1fr 1fr !important; }
  .bio-grid           { grid-template-columns: 1fr !important; }
  .bio-col-portrait   { display: none !important; }
  .pillar-grid        { grid-template-columns: 1fr !important; }
  .speaking-grid      { grid-template-columns: 1fr !important; }
  .outcomes-grid      { grid-template-columns: 1fr !important; }
  .timeline-row       { grid-template-columns: 1fr !important; gap: 4px !important; }
  .testimonials-grid  { grid-template-columns: 1fr !important; }
  .contact-grid       { grid-template-columns: 1fr !important; }

  /* Misc */
  .numbers-grid > div { border-left: none !important; border-top: 1px solid var(--ink-line-soft); }
  .numbers-grid > div:first-child { border-top: none; }
}