/* =========================================================================
 * cta-effects.css · v1.5.13 · Companion styles for cta-effects.js
 * Pav (10-08-26) · 4 CTA variants · magnetic · ripple · glitch · tilt
 *
 * Naming · .fx-<variant>  ·  applied by JS after data-fx opt-in
 * Reduced-motion · everything gracefully collapses to a plain hover
 * Mobile · magnetic + tilt are pure-JS (no-op on touch) · ripple still fires
 * ========================================================================= */

/* ---- Shared · buttons that opt in get a smoother transition base -------- */
[data-fx] {
  will-change: transform;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 260ms ease,
              background 260ms ease;
}

/* ---- A · Magnetic ------------------------------------------------------- */
/* Pure JS-driven transform · CSS just ensures a smooth reset when cursor
 * leaves and cleans up hover glow so the pull reads as "sticky". */
.fx-magnetic { }
.fx-magnetic:hover {
  box-shadow: 0 14px 42px -12px var(--brand-orange-glow, rgba(234,90,45,0.55));
}

/* ---- B · Ripple + fill sweep -------------------------------------------- */
/* .fx-ripple__wave is spawned by JS on click · absolutely positioned,
 * scales from 0 to 1 with fading opacity. Overflow hidden clips to shape. */
.fx-ripple {
  position: relative;
  overflow: hidden;
  isolation: isolate;                 /* keeps ripple below label */
}
.fx-ripple__wave {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
                rgba(255,255,255,0.55) 0%,
                rgba(255,255,255,0.15) 40%,
                rgba(255,255,255,0) 70%);
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
  animation: fx-ripple-out 620ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes fx-ripple-out {
  from { transform: scale(0);    opacity: 0.75; }
  to   { transform: scale(1);    opacity: 0;    }
}
/* Ensure the label sits above the ripple layer */
.fx-ripple > * { position: relative; z-index: 1; }

/* ---- C · Glitch / rgb-split --------------------------------------------- */
/* Two duplicated ::before / ::after layers offset in red + cyan channels,
 * animated briefly on the .fx-glitch--fire class toggle. */
.fx-glitch { position: relative; overflow: hidden; }
.fx-glitch__label {
  position: relative;
  display: inline-block;
}
.fx-glitch__label::before,
.fx-glitch__label::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 60ms ease;
}
.fx-glitch__label::before {
  color: #ff3860;
  transform: translate(0, 0);
  mix-blend-mode: screen;
}
.fx-glitch__label::after {
  color: #22d3ee;
  transform: translate(0, 0);
  mix-blend-mode: screen;
}
.fx-glitch--fire .fx-glitch__label::before {
  opacity: 0.9;
  animation: fx-glitch-r 280ms steps(4, end);
}
.fx-glitch--fire .fx-glitch__label::after {
  opacity: 0.9;
  animation: fx-glitch-c 280ms steps(4, end);
}
@keyframes fx-glitch-r {
  0%   { transform: translate( 0px, 0); }
  25%  { transform: translate(-2px,-1px); }
  50%  { transform: translate( 2px, 1px); }
  75%  { transform: translate(-1px, 2px); }
  100% { transform: translate( 0px, 0); opacity: 0; }
}
@keyframes fx-glitch-c {
  0%   { transform: translate( 0px, 0); }
  25%  { transform: translate( 2px, 1px); }
  50%  { transform: translate(-2px,-1px); }
  75%  { transform: translate( 1px,-2px); }
  100% { transform: translate( 0px, 0); opacity: 0; }
}

/* ---- D · 3D tilt -------------------------------------------------------- */
/* Pure JS-driven transform · CSS ensures the perspective feels tactile
 * with a soft shadow that grows on hover. */
.fx-tilt {
  transform-style: preserve-3d;
}
.fx-tilt:hover {
  box-shadow: 0 22px 48px -18px rgba(0,0,0,0.55),
              0 14px 36px -14px var(--brand-orange-glow, rgba(234,90,45,0.45));
}

/* ---- Touch fallback ----------------------------------------------------- */
/* On coarse pointers · magnetic + tilt are inert (JS skips them). Give a
 * subtle press-scale on active for tactile feedback. */
@media (pointer: coarse) {
  [data-fx]:active {
    transform: scale(0.97);
    transition: transform 120ms ease;
  }
}

/* ---- Reduced motion ----------------------------------------------------- */
/* JS already gates ripple/glitch/tilt/magnetic on prefers-reduced-motion.
 * Belt-and-braces · disable animations here too so any stray classes are
 * harmless. */
@media (prefers-reduced-motion: reduce) {
  .fx-ripple__wave { animation: none; opacity: 0; }
  .fx-glitch--fire .fx-glitch__label::before,
  .fx-glitch--fire .fx-glitch__label::after { animation: none; opacity: 0; }
  [data-fx] { transition: background 200ms ease, color 200ms ease; }
}