/* ============================================================
   CTA micro-interactions — 10x #1 (2026-05-11)
   Applies to all primary action buttons + bundle/tip CTAs.
   Zero JS. Honors prefers-reduced-motion.
   ============================================================ */

/* Universal selector covers the common CTA classes site-wide */
.hero-action,
.dr-trust-strip .hero-action,
.dr-bundle-card .btn,
.sup-tip,
.home-sticky-buy-cta,
.sticky-buy-bar .hero-action,
.proof-cta,
button.hero-action,
a[data-emotion-register] {
  /* Smooth base transition for color/shadow/transform */
  transition:
    transform 150ms cubic-bezier(.2, .7, .2, 1),
    box-shadow 150ms cubic-bezier(.2, .7, .2, 1),
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
  will-change: transform, box-shadow;
}

/* Hover lift — subtle 4px shadow rise */
.hero-action.primary:hover,
.hero-action.magnetic:hover,
.dr-bundle-card .btn-primary:hover,
.sup-tip:hover,
.home-sticky-buy-cta:hover,
.sticky-buy-bar .hero-action.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px -6px rgba(20, 20, 14, 0.22);
}

/* Press state — scale-down feedback */
.hero-action:active,
.dr-bundle-card .btn:active,
.sup-tip:active,
.home-sticky-buy-cta:active,
.sticky-buy-bar .hero-action:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 80ms;
}

/* Tap-success glow — fires briefly on click via :focus-visible after release.
   Pure CSS approximation: pulse a soft clay glow once.
   Triggered by adding .is-firing class via tracker, OR by :focus-visible after click. */
@keyframes dr-cta-glow {
  0%   { box-shadow: 0 0 0 0 rgba(201, 97, 63, 0.5); }
  60%  { box-shadow: 0 0 0 10px rgba(201, 97, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 97, 63, 0); }
}

.hero-action.primary.is-firing,
.dr-bundle-card .btn-primary.is-firing,
.home-sticky-buy-cta.is-firing,
.sup-tip.is-firing {
  animation: dr-cta-glow 360ms ease-out;
}

/* Focus state for keyboard nav — distinct from hover */
.hero-action:focus-visible,
.dr-bundle-card .btn:focus-visible,
.sup-tip:focus-visible,
.home-sticky-buy-cta:focus-visible {
  outline: 2px solid var(--ds-clay, #c9613f);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-action,
  .dr-trust-strip .hero-action,
  .dr-bundle-card .btn,
  .sup-tip,
  .home-sticky-buy-cta,
  .sticky-buy-bar .hero-action,
  a[data-emotion-register] {
    transition: none;
    will-change: auto;
  }
  .hero-action:hover,
  .dr-bundle-card .btn:hover,
  .sup-tip:hover,
  .home-sticky-buy-cta:hover {
    transform: none;
    box-shadow: none;
  }
  .hero-action:active,
  .dr-bundle-card .btn:active,
  .sup-tip:active,
  .home-sticky-buy-cta:active {
    transform: none;
  }
  .hero-action.primary.is-firing,
  .dr-bundle-card .btn-primary.is-firing,
  .home-sticky-buy-cta.is-firing,
  .sup-tip.is-firing {
    animation: none;
  }
}