/* ==========================================================================
   STAY FREE ENTERPRISE — CTA button, magnetic-pull layer
   Base .sf-cta (coral bg, charcoal text, deep-coral hover) lives in
   base.css — this file only adds the optional magnetic-pull affordance
   for [data-magnetic] CTAs on fine pointers (cta-button.js), reusing the
   fx42-magnetic-cursor.js mechanic. Never changes color/contrast.
   ========================================================================== */

.sf-cta[data-magnetic] {
  will-change: transform;
}

/* subtle sheen on hover, catches-the-light per motion vocabulary (never glow) */
.sf-cta {
  position: relative;
  overflow: hidden;
}
.sf-cta::after {
  content: "";
  position: absolute;
  inset: -4px;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
}
.sf-cta:hover::after {
  transform: translateX(130%);
  transition: transform 0.6s var(--sf-ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .sf-cta::after { display: none; }
}

/* secondary CTA variant: teal outline, still routes to /book, never
   coral (coral stays 100% exclusive to the primary action per viewport) */
.sf-cta--secondary {
  background: transparent;
  color: var(--sf-teal);
  border: 1.5px solid var(--sf-teal);
  box-shadow: none;
}
.sf-cta--secondary:hover,
.sf-cta--secondary:focus-visible {
  background: rgba(14, 74, 60, 0.06);
  color: var(--sf-teal);
  box-shadow: none;
}