/* ----- Reveal-on-scroll ----- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal.reveal-up   { transform: translateY(24px); }
.reveal.reveal-left { transform: translateX(-24px); }
.reveal.reveal-right{ transform: translateX(24px); }
.reveal.reveal-zoom { transform: scale(0.96); }
.reveal.is-visible.reveal-left,
.reveal.is-visible.reveal-right { transform: translateX(0); }
.reveal.is-visible.reveal-zoom  { transform: scale(1); }

/* Stagger: applied via inline --d on children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* ----- Hero intro ----- */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-bg-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.hero .hero-bg {
  animation: hero-bg-zoom 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero .hero-overlay {
  animation: hero-fade 0.9s ease-out both;
}
.hero h1 {
  animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.15s;
}
.hero .hero-sub {
  animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.35s;
}
.hero .hero-actions {
  animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.55s;
}
.page-hero h1,
.page-hero p,
.page-hero .eyebrow {
  animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.page-hero .eyebrow { animation-delay: 0.05s; }
.page-hero h1       { animation-delay: 0.15s; }
.page-hero p        { animation-delay: 0.30s; }

/* Accent underline can sweep in */
.hero h1 .accent,
.title .underline,
.mission-quote .underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.hero h1 .accent { background-size: 100% 2px; }
.reveal.is-visible .underline,
.is-visible .title .underline,
.is-visible.mission-quote .underline {
  background-size: 100% 2px;
}

/* ----- Hover refinements ----- */
.product-card { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                            border-color 0.25s ease,
                            box-shadow 0.25s ease; }
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.18);
}
.how-card { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                        border-color 0.25s ease,
                        box-shadow 0.25s ease; }
.how-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.15);
}

.btn-pill { transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn-pill:hover { transform: translateY(-2px); }
.btn-pill:active { transform: translateY(0); }

.link-arrow { transition: gap 0.2s ease, color 0.2s ease; }
.link-arrow:hover { gap: 10px; }

.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover::after { transform: scaleX(1); }

.product-icon { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.product-card:hover .product-icon { transform: scale(1.05) rotate(-2deg); }

.roster-chip { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease; }
.roster-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -16px rgba(0,0,0,0.2); }

/* ----- Number count-up: prevent layout jump while animating ----- */
.counting { font-variant-numeric: tabular-nums; }

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero .hero-bg,
  .hero .hero-overlay,
  .hero h1,
  .hero .hero-sub,
  .hero .hero-actions,
  .page-hero h1,
  .page-hero p,
  .page-hero .eyebrow {
    animation: none !important;
  }
  .product-card:hover,
  .how-card:hover,
  .btn-pill:hover,
  .roster-chip:hover { transform: none !important; }
}