@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";

/* ---------- Site animations (hero reveal, scroll reveal, decor spin) ---------- */
@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-reveal {
  opacity: 0;
  animation: hero-reveal 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes decor-spin {
  to { transform: rotate(360deg); }
}
.decor-spin {
  animation: decor-spin 70s linear infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1), transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Like .reveal, but staggers its direct children instead of moving as
   one block — for card grids / multi-column rows that read better as
   a small cascade than a single flat fade. */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1), transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .hero-reveal, .decor-spin, .reveal, .reveal-stagger > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Mobile ----------
   The page markup is desktop-first with fixed px paddings and inline
   grid/flex layouts, so most of this necessarily overrides inline
   styles with !important — that's the only lever available without
   rewriting every section's layout onto classes. */
.mobile-menu-panel {
  display: none;
}

@media (max-width: 900px) {
  header {
    padding-left: 20px !important;
    padding-right: 20px !important;
    height: 64px !important;
  }
  header img {
    height: 34px !important;
    width: auto !important;
  }
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .site-nav, .site-header-cta {
    display: none !important;
  }
  .mobile-menu-toggle {
    display: inline-flex !important;
  }
  .mobile-menu-panel.is-open {
    display: block !important;
  }

  .grid-responsive {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Grids whose columns divide with a border-right lose that divider
     once stacked to one column (it'd hang off the right edge of a
     full-width card) — swap it for a border-bottom between rows. */
  .grid-divided > div {
    border-right: none !important;
    border-bottom: 1px solid var(--color-black) !important;
  }
  .grid-divided > div:last-child {
    border-bottom: none !important;
  }
  .row-stack {
    flex-direction: column !important;
  }
  .flex-wrap-mobile {
    flex-wrap: wrap !important;
    justify-content: center !important;
    column-gap: 28px !important;
    row-gap: 24px !important;
  }
  .pipeline-line {
    display: none !important;
  }
  .footer-cols {
    flex-direction: column !important;
    gap: 28px !important;
  }

  .hero-banner {
    height: auto !important;
    min-height: 0 !important;
    padding-block: 48px !important;
  }
  .hero-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: none !important;
  }
  .whyus-plaque {
    padding: 20px 24px !important;
  }
  .table-scroll table {
    font-size: 12px !important;
  }
  .table-scroll th, .table-scroll td {
    padding: 10px 12px !important;
  }
}