/**
 * Hero CTA fly-in SSOT (sitewide .hero-cta).
 * Default: fully visible (no-JS safe). JS adds .hero-cta-fly-btn only when IO + motion OK.
 */

.hero-cta.hero-cta-fly-group {
  overflow: visible;
  position: relative;
}

.hero-cta-fly-btn {
  opacity: 0;
  transform: translate3d(var(--hero-cta-x, 0px), var(--hero-cta-y, 48px), 0);
  will-change: transform, opacity, background-color, border-color, color;
  transition:
    transform var(--hero-cta-dur, 0.78s) cubic-bezier(0.16, 0.84, 0.22, 1),
    opacity calc(var(--hero-cta-dur, 0.78s) * 0.72) ease-out;
  transition-delay: var(--hero-cta-delay, 0ms);
}

.hero-cta-fly-btn.is-arriving {
  opacity: 1;
  transform: none;
}

.hero-cta-fly-btn.is-color-cycling {
  background-color: var(--hero-cta-cycle-bg) !important;
  border-color: var(--hero-cta-cycle-border) !important;
  color: var(--hero-cta-cycle-fg) !important;
  transition:
    transform var(--hero-cta-dur, 0.78s) cubic-bezier(0.16, 0.84, 0.22, 1),
    opacity calc(var(--hero-cta-dur, 0.78s) * 0.72) ease-out,
    background-color 0.12s linear,
    border-color 0.12s linear,
    color 0.12s linear;
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta-fly-btn,
  .hero-cta-fly-btn.is-arriving,
  .hero-cta-fly-btn.is-color-cycling {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    background-color: revert-layer !important;
    border-color: revert-layer !important;
    color: revert-layer !important;
  }
}