/* Apex button FX — glow + shine sweep + lift, sitewide.
   Added 2026-11-04 on Muhammad's order ("glow + shine + lift sab buttons par").
   Design decisions (locked with the recommendation):
   - Pure CSS, no JS, no HTML edits per button: the deploy transform in
     insert_card.py injects <link href="/button-fx.css"> into every page, so
     this one file covers all 127+ pages at once (fresh URL = no 30-day CSS
     cache problem).
   - Hover-triggered single shine sweep (NOT a looping shimmer): one element
     shimmering is premium; thirty buttons shimmering forever is noise.
   - Only real buttons are targeted: every <button> plus <a> elements whose
     class list carries a solid-button background token. Text links, nav
     pills (hover:bg-* tokens only), the logo, and blog cards (group +
     blog/ href guards) are deliberately excluded.
   - Green glow variant only for the floating WhatsApp button (bg-[#25D366]);
     the dark footer WhatsApp button keeps the orange glow to match its
     orange neighbour.
   - GPU-friendly only: transform + box-shadow + a left transition on the
     shine layer. No layout shift. Respects prefers-reduced-motion.
   - Focus-visible ring survives: outlines paint outside the border box and
     are NOT clipped by overflow:hidden. */
button,
input[type="submit"],
input[type="button"],
a[class~="bg-[#FE4F15]"],
a[class~="bg-slate-100"],
a[class~="bg-slate-800"],
a[class~="bg-[#25D366]"],
a[class~="bg-white"]:not([class~="group"]):not([href^="blog/"]) {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
button::after,
input[type="submit"]::after,
input[type="button"]::after,
a[class~="bg-[#FE4F15]"]::after,
a[class~="bg-slate-100"]::after,
a[class~="bg-slate-800"]::after,
a[class~="bg-[#25D366]"]::after,
a[class~="bg-white"]:not([class~="group"]):not([href^="blog/"])::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a[class~="bg-[#FE4F15]"]:hover,
a[class~="bg-slate-100"]:hover,
a[class~="bg-slate-800"]:hover,
a[class~="bg-[#25D366]"]:hover,
a[class~="bg-white"]:not([class~="group"]):not([href^="blog/"]):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(254, 79, 21, 0.35), 0 2px 8px rgba(254, 79, 21, 0.25);
}
a[class~="bg-[#25D366]"]:hover {
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.4), 0 2px 8px rgba(37, 211, 102, 0.28);
}
button:hover::after,
input[type="submit"]:hover::after,
input[type="button"]:hover::after,
a[class~="bg-[#FE4F15]"]:hover::after,
a[class~="bg-slate-100"]:hover::after,
a[class~="bg-slate-800"]:hover::after,
a[class~="bg-[#25D366]"]:hover::after,
a[class~="bg-white"]:not([class~="group"]):not([href^="blog/"]):hover::after {
  left: 130%;
}
button:active,
input[type="submit"]:active,
input[type="button"]:active,
a[class~="bg-[#FE4F15]"]:active,
a[class~="bg-slate-100"]:active,
a[class~="bg-slate-800"]:active,
a[class~="bg-[#25D366]"]:active,
a[class~="bg-white"]:not([class~="group"]):not([href^="blog/"]):active {
  transform: translateY(0) scale(0.98);
}
button:active::after,
input[type="submit"]:active::after,
input[type="button"]:active::after,
a[class~="bg-[#FE4F15]"]:active::after,
a[class~="bg-slate-100"]:active::after,
a[class~="bg-slate-800"]:active::after,
a[class~="bg-[#25D366]"]:active::after,
a[class~="bg-white"]:not([class~="group"]):not([href^="blog/"]):active::after {
  left: 130%;
}
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
a[class~="bg-[#FE4F15]"]:focus-visible,
a[class~="bg-slate-100"]:focus-visible,
a[class~="bg-slate-800"]:focus-visible,
a[class~="bg-[#25D366]"]:focus-visible,
a[class~="bg-white"]:not([class~="group"]):not([href^="blog/"]):focus-visible {
  outline: 2px solid #FE4F15;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  button,
  input[type="submit"],
  input[type="button"],
  a[class~="bg-[#FE4F15]"],
  a[class~="bg-slate-100"],
  a[class~="bg-slate-800"],
  a[class~="bg-[#25D366]"],
  a[class~="bg-white"]:not([class~="group"]):not([href^="blog/"]) {
    transition: none;
  }
  button::after,
  input[type="submit"]::after,
  input[type="button"]::after,
  a[class~="bg-[#FE4F15]"]::after,
  a[class~="bg-slate-100"]::after,
  a[class~="bg-slate-800"]::after,
  a[class~="bg-[#25D366]"]::after,
  a[class~="bg-white"]:not([class~="group"]):not([href^="blog/"])::after {
    display: none;
  }
}