/* Non-critical CSS — loaded deferred after FCP */

/* ── Header: slides down once the hero section is fully off-screen ── */
#site-header.header-visible {
  transform: translateY(0);
  background-color: hsl(211 75% 18% / 0.97);
  box-shadow: 0 1px 0 hsl(0 0% 100% / 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ── Marquee hover pause ──────────────────────────────────── */
.marquee-track:hover { animation-play-state: paused; }

/* ── Mission timeline card entrance ──────────────────────── */
.mission-card {
  opacity: 0;
  transform: translateX(16px) translateY(8px) scale(0.97);
  transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.7s ease,
              border-color 0.7s ease, background-color 0.7s ease;
}
.mission-card.is-active {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}
.mission-dot {
  transition: background-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
}
.mission-card.is-active .mission-dot {
  background-color: hsl(152 69% 45%);
  box-shadow: 0 0 0 4px hsl(152 69% 45% / 0.2);
  transform: scale(1.1);
}

/* ── Sticky feature card entrance ────────────────────────── */
.feature-card {
  opacity: 0.55;
  transform: translateY(16px) scale(0.98);
  border-color: hsl(214.3 31.8% 91.4% / 0.3);
  transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.7s ease,
              box-shadow 0.7s ease, background-color 0.7s ease;
}
.feature-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  border-color: hsl(152 69% 45% / 0.3);
  box-shadow: 0 25px 50px -12px hsl(152 69% 45% / 0.12);
}
.feature-accent {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s ease;
}
.feature-card.is-visible .feature-accent { transform: scaleX(1); }
.feature-icon-wrap {
  transition: background 0.5s ease;
  background: hsl(210 40% 96.1% / 0.5);
}
.feature-card.is-visible .feature-icon-wrap {
  background: linear-gradient(135deg, hsl(152 69% 45% / 0.2), hsl(152 69% 45% / 0.05));
  box-shadow: 0 8px 16px hsl(152 69% 45% / 0.1);
}
.feature-icon { color: hsl(215.4 16.3% 46.9% / 0.5); transition: color 0.5s ease; }
.feature-card.is-visible .feature-icon { color: hsl(152 69% 45%); }
.feature-bullet { background-color: hsl(214.3 31.8% 91.4%); transition: background-color 0.5s ease; }
.feature-card.is-visible .feature-bullet { background-color: hsl(152 69% 45%); }
.feature-step-label { color: hsl(215.4 16.3% 46.9%); transition: color 0.5s ease; }
.feature-card.is-visible .feature-step-label { color: hsl(152 69% 45%); }

/* ── Comparison tabs ──────────────────────────────────────── */
.compare-panel { display: none; }
.compare-panel.active {
  display: block;
  animation: panel-fade-in 0.25s ease both;
}
@keyframes panel-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.compare-tab { color: hsl(215.4 16.3% 46.9%); }
.compare-tab.active { color: white; }

/* ── FAQ details/summary ──────────────────────────────────── */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.2s ease; }
details[open] summary { color: hsl(211 75% 18%); }

/* ── Carousel ─────────────────────────────────────────────── */
.carousel-track {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { scroll-snap-align: start; flex-shrink: 0; }