/* Shared interaction effects for every page: glowing buttons with a lifting arrow,
   a press ripple on every click or tap, and 3D tilt cards with a light that follows the mouse.
   Loaded after each page's own <style>, wired up by fx.js. */

/* ---------- Buttons: glow that follows the cursor ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate;
  transition: background .15s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,226,190,.38), transparent 70%); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(227,144,116,.35), 0 8px 26px rgba(174,90,59,.55), 0 0 42px rgba(227,144,116,.28); }
  .btn:hover::before { opacity: 1; }
  .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(227,144,116,.8), 0 0 30px rgba(227,144,116,.22); }
}
.btn:active { transform: translateY(0) scale(.96); transition-duration: .08s; }

/* ---------- The arrow: lifts and tips to 45 degrees on hover ---------- */
.fx-arr { display: inline-flex; width: 1.05em; height: 1.05em; flex: none; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.fx-arr svg { width: 100%; height: 100%; }
a:hover .fx-arr, a:focus-visible .fx-arr, .promo:hover .fx-arr, .guide:hover .btn-block .fx-arr { transform: translateY(-2px) rotate(-45deg); }
/* Downloads get a down arrow that drops instead */
.fx-arr.down { transform: rotate(90deg); }
a:hover .fx-arr.down, a:focus-visible .fx-arr.down, .guide:hover .btn-block .fx-arr.down { transform: rotate(90deg) translateX(3px); animation: fxDrop .9s ease-in-out infinite; }
@keyframes fxDrop { 0%,100% { translate: 0 0; } 50% { translate: 0 3px; } }
.coachbar strong { display: inline-flex; align-items: center; gap: 6px; }
/* Tap targets: at least 44px tall on phones */
.guide .read { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 4px; }
.pills a { display: inline-flex; align-items: center; min-height: 44px; padding-left: 16px; padding-right: 16px; }
.chip { min-height: 44px; padding-left: 17px; padding-right: 17px; }
.chip, .mode { position: relative; overflow: hidden; isolation: isolate; }

/* ---------- Press ripple (mouse and touch) ---------- */
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255,240,220,.55), rgba(255,240,220,0) 70%); animation: fxRipple .6s ease-out forwards; }
@keyframes fxRipple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* ---------- 3D tilt cards ---------- */
.fx-tilt, .fx-glow { isolation: isolate; }
.fx-tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.fx-tilt.fx-on { transition-property: transform, border-color, box-shadow !important; transition-duration: .12s, .25s, .25s !important; transition-delay: 0s !important; transition-timing-function: ease-out !important; }
/* Parts of the card float toward you while it tilts */
.fx-tilt > * { transition: transform .45s cubic-bezier(.2,.7,.2,1), background .15s ease, box-shadow .3s ease; }
.fx-tilt.fx-on > .meta, .fx-tilt.fx-on > .vb { transform: translateZ(26px); }
.fx-tilt.fx-on > h3, .fx-tilt.fx-on > .txt, .fx-tilt.fx-on > b { transform: translateZ(44px); }
.fx-tilt.fx-on > .btn, .fx-tilt.fx-on > .read { transform: translateZ(34px); }
/* Light that follows the mouse across the card */
.fx-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(227,144,116,.16), transparent 45%); }
.fx-on > .fx-shine, .fx-glow:hover > .fx-shine { opacity: 1; }
.fx-glow { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
  a:hover .fx-arr:not(.down), .promo:hover .fx-arr { transform: none !important; }
  .fx-arr { animation: none !important; transition: none !important; }
  .fx-ripple { display: none; }
}