/* ============================================================
   PRIME — fx.css: micro-animações dos botões de ação (CTA)
   ------------------------------------------------------------
   Carregada junto com base.css quando um tema Prime está ativo.
   Efeitos: glow pulsante + brilho varrendo (shimmer) nos CTAs
   de largura cheia. Respeita prefers-reduced-motion.
   ============================================================ */

@keyframes prime-cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--ep-primary-primary-Opacity, rgba(255,255,255,.25)); }
  50%      { box-shadow: 0 0 18px 3px var(--ep-primary-primary-Opacity, rgba(255,255,255,.25)); }
}

@keyframes prime-cta-shimmer {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  55%  { transform: translateX(230%) skewX(-18deg); }
  100% { transform: translateX(230%) skewX(-18deg); }
}

/* CTAs de largura cheia (Depositar, Sacar, Confirmar, Login...) */
html.prime ion-button[expand="block"],
html.prime ion-button[expand="full"] {
  position: relative;
  overflow: hidden;
  border-radius: var(--ep-border-radius-m, 6px);
  animation: prime-cta-glow 2.8s ease-in-out infinite;
}

html.prime ion-button[expand="block"]::after,
html.prime ion-button[expand="full"]::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 38%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  animation: prime-cta-shimmer 3.4s ease-in-out infinite;
}

/* Leve resposta ao toque em todos os botões */
html.prime ion-button::part(native) {
  transition: filter .18s ease, transform .18s ease;
}
html.prime ion-button:active::part(native) {
  filter: brightness(1.12);
  transform: scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  html.prime ion-button[expand="block"],
  html.prime ion-button[expand="full"] { animation: none; }
  html.prime ion-button[expand="block"]::after,
  html.prime ion-button[expand="full"]::after { animation: none; display: none; }
}