/* Matt Walsh CXO — rebuilt to match the Figma Make design exactly.
   Tailwind (CDN, JIT) handles almost all layout/utility styling — see the
   tailwind.config block inlined in each page's <head>, which mirrors
   src/styles/theme.css from the Figma Make source 1:1 (light mode only,
   since this production site doesn't have a dark-mode toggle).
   This file only carries what Tailwind's CDN build can't: @font-face-driven
   base type rules, and the hand-written entrance-animation utilities that
   replace the tw-animate-css / Framer Motion "animate-in" classes used in
   the Figma Make source (that plugin can't be loaded via the Play CDN). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Balanced headline wrapping, matching Tailwind's text-balance utility
   fallback for browsers that don't yet support it natively. */
.text-balance {
  text-wrap: balance;
}

/* Custom <select> chevron suppression so our own ChevronRight icon can sit
   on top of the native control, matching the Figma markup exactly. */
select.bare-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}

/* ---------- Entrance animations ----------
   Hand-rolled equivalents of the Figma Make source's
   "animate-in fade-in slide-in-from-*" utility combinations. */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(2rem); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-1rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn95 {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.anim-fade-in       { animation: fadeIn 500ms ease-out both; }
.anim-fade-in-fast  { animation: fadeIn 300ms ease-out both; }
.anim-fade-slide-up { animation: fadeSlideUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-fade-slide-right {
  animation: fadeSlideRight 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 300ms;
}
.anim-fade-slide-down { animation: fadeSlideDown 500ms ease-out both; }
.anim-zoom-in { animation: zoomIn95 300ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim-fade-in, .anim-fade-in-fast, .anim-fade-slide-up,
  .anim-fade-slide-right, .anim-fade-slide-down, .anim-zoom-in {
    animation: none !important;
  }
  [data-parallax] .parallax-inner {
    transform: none !important;
  }
}

/* ---------- Parallax (ParallaxImage from the Figma Make source) ----------
   Framer Motion's useScroll/useTransform drove a -15% to 15% translateY as
   each image scrolled through the viewport. Reproduced here with a plain
   scroll-driven rAF loop in js/main.js; this just sets up the geometry. */
[data-parallax] {
  position: relative;
  overflow: hidden;
}
[data-parallax] .parallax-inner {
  position: absolute;
  top: -15%;
  left: 0;
  right: 0;
  height: 130%;
  will-change: transform;
}
