@import url("./pages/home.css");

/* Homepage hero switch: desktop vs approved mobile hero (≤767px) */
.home-page {
  /* Match .home-page padding-top so hero fills remaining viewport under fixed nav */
  --mh-header-h: var(--hp-nav-offset);
  --mh-pad-x: clamp(0.9rem, 4vw, 1.15rem);
  --mh-grad: linear-gradient(135deg, #6366f1 0%, #a855f7 45%, #ec4899 100%);
  --mh-violet: #a78bfa;
  --mh-muted: #94a3b8;
  --mh-blue: #60a5fa;
  --mh-surface: #141422;
  --mh-surface-2: #1a1a2a;
  --mh-border: rgba(148, 163, 184, 0.16);
  --mh-tap: 46px;
  --mh-bg: #0b0b14;
  --mh-text: #f1f5f9;
}

/* Default (desktop/tablet): hide mobile hero + below-fold mobile compositions */
.home-page > .mobile-home-hero,
.home-page > .mh-section,
.home-page > .mh-cta {
  display: none !important;
}

@media (max-width: 767px) {
  .home-page > .home-page__hero,
  .home-page > .home-page__platform,
  .home-page > .home-page__projects,
  .home-page > .home-page__stats,
  .home-page > .home-page__process,
  .home-page > .home-page__cta {
    display: none !important;
  }

  .home-page > .mobile-home-hero {
    display: flex !important;
  }

  .home-page > .mh-section,
  .home-page > .mh-cta {
    display: block !important;
  }
}

/* Pause decorative infinite loops when hero/stage is off-screen (set by home.js). */
html.home-motion-paused .home-page [class*="home-page__stage"],
html.home-motion-paused .home-page [class*="home-page__hero"],
html.home-motion-paused .home-page__cta-card {
  animation-play-state: paused !important;
}

html.home-motion-paused .home-page__stage-card,
html.home-motion-paused .home-page__platform-service-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-page * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}