@import url('wix-fonts.css');

.page-index-site {
  font-family: var(--wix-font-body);
  font-weight: 400;
}

.page-index-site .main-nav a {
  font-family: Arial, Helvetica, var(--wix-font-body), sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.page-index-site .btn,
.page-index-site .view-all {
  font-family: Arial, Helvetica, var(--wix-font-body), sans-serif;
  font-weight: 400;
}

.page-index-site p,
.page-index-site li,
.page-index-site blockquote,
.page-index-site .hero-sub,
.page-index-site .stat-caption,
.page-index-site .stat-label,
.page-index-site .quote-bio,
.page-index-site .quote-name,
.page-index-site .story-copy p,
.page-index-site .blueprint-card p,
.page-index-site .testimonial-card p,
.page-index-site .t-service,
.page-index-site .t-person span,
.page-index-site .footer-brand p,
.page-index-site .footer-col a,
.page-index-site .footer-bottom {
  font-family: var(--wix-font-body);
  font-weight: 400;
}

.page-index-site .hero-copy h1 {
  font-family: var(--font-heading);
  font-weight: 600;
}

.page-index-site .section-title,
.page-index-site .blueprint-card h3,
.page-index-site .stat-huge,
.page-index-site .stat-number,
.page-index-site .t-multiplier,
.page-index-site .quote-copy h3,
.page-index-site .story-copy h3,
.page-index-site .story-copy h4,
.page-index-site .testimonial-card h4,
.page-index-site .cta-banner h2,
.page-index-site .footer-col h5 {
  font-family: var(--font-display);
  font-weight: 400;
}

.page-index-site .story-tab {
      font-weight: 500 !important;
    font-family: 'Nuckle regular' !important;
}

/* ============ PAGE-LOAD ANIMATION (hero only, trial) ============
   Pure CSS, opacity + transform only (compositor-only properties — no
   layout/reflow, so this cannot affect CLS). Kept short (0.45s) and
   starts immediately with no artificial delay before the first element,
   so it has negligible effect on LCP timing. No JS, no extra HTTP
   request — this file is already enqueued only on the homepage.
   Disabled entirely for users who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .page-index-site .hero-copy > *,
  .page-index-site .hero-stat {
    opacity: 0;
    transform: translateY(16px);
    animation: vm-fade-up 0.45s ease-out forwards;
  }

  .page-index-site .hero-copy > *:nth-child(1) { animation-delay: 0s; }
  .page-index-site .hero-copy > *:nth-child(2) { animation-delay: 0.08s; }
  .page-index-site .hero-copy > *:nth-child(3) { animation-delay: 0.16s; }
  .page-index-site .hero-copy > *:nth-child(4) { animation-delay: 0.24s; }
  .page-index-site .hero-stat { animation-delay: 0.16s; }
}

@keyframes vm-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============ SCROLL-REVEAL (remaining sections) ============
   Same rules as the hero animation above (opacity + transform only, no
   layout impact) but for content further down the page, driven by
   assets/js/scroll-reveal.js since a plain time-based CSS animation
   would already be finished by the time a visitor scrolls down to
   below-the-fold sections. The "html.js" prefix means content only gets
   hidden pre-reveal when JS is confirmed running (see the inline script
   in header.php) — with JS disabled/blocked, everything is visible
   immediately, no broken permanently-hidden content. */
@media (prefers-reduced-motion: no-preference) {
  html.js .page-index-site .vm-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }

  html.js .page-index-site .vm-reveal-left {
    transform: translateX(-48px);
  }

  html.js .page-index-site .vm-reveal.vm-in-view {
    opacity: 1;
    transform: translateY(0);
  }

  html.js .page-index-site .vm-reveal-left.vm-in-view {
    transform: translateX(0);
  }

  /* Once a card has scrolled into view, ".vm-in-view" pins transform to
     translateY(0) at higher specificity than plain ".blueprint-card:hover"
     (style.css), silently cancelling its scale(1.09) hover effect. Restore
     it here - by the time a card can be hovered it's already in view, so
     this is the state that actually matters on the homepage. */
  html.js .page-index-site .blueprint-card.vm-reveal.vm-in-view:hover {
    transform: scale(1.09);
  }

  /* Small stagger for repeated items (cards, stat items, testimonials). */
  .page-index-site .vm-reveal-d1 { transition-delay: 0.08s; }
  .page-index-site .vm-reveal-d2 { transition-delay: 0.16s; }
  .page-index-site .vm-reveal-d3 { transition-delay: 0.24s; }
  .page-index-site .vm-reveal-d4 { transition-delay: 0.32s; }
}