/* HoistCall marketing site — shared styles
   Self-contained: local fonts with system-ui fallback. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-display.woff2") format("woff2");
}

:root {
  --navy: #0C1E3C;
  --orange: #FF6200;
  --cyan: #00C8E6;
  --light: #F7F8FA;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Map Tailwind's font-sans / font-display utilities to our local fonts.
   These !important overrides ensure the CDN Tailwind base does not win. */
.font-sans {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.font-display {
  font-family: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* ---- Scroll reveal animations (IntersectionObserver toggles .is-visible) ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px) translateZ(0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-sm {
  opacity: 0;
  transform: translateY(10px) translateZ(0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-30px) translateZ(0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(30px) translateZ(0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.97) translateZ(0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible,
.reveal-sm.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1) translateZ(0);
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-sm, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* Stagger helper for grouped reveals */
.reveal[data-delay="1"], .reveal-sm[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"], .reveal-sm[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"], .reveal-sm[data-delay="3"] { transition-delay: 0.24s; }

/* Mobile menu panel */
#mobile-menu {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#mobile-menu.hidden-menu {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}