/**
 * LeadFlow Elementor — Biblioteca de Efeitos (classes utilitárias)
 * ----------------------------------------------------------------------
 * Aplique marcando o elemento (aba Avançado → CSS Classes do Elementor).
 * Cor via variável --lfe-fx-color: adicione uma classe de cor junto
 * (ex.: "lfe-glow lfe-fx-red").
 *
 *   BOTÕES:   lfe-glow · lfe-glow-soft · lfe-border-run · lfe-shine · lfe-fill · lfe-grow
 *   TÍTULOS:  lfe-gradient-text · lfe-glow-text · lfe-underline
 *   ELEMENTOS:lfe-lift · lfe-pulse · lfe-glow-box
 *   CORES:    lfe-fx-cyan/blue/red/green/gold/purple/white
 */

@property --lfe-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* cor padrão (baixa especificidade p/ ser sobrescrita pelas classes de cor) */
:where(
  .lfe-glow, .lfe-glow-soft, .lfe-border-run,
  .lfe-gradient-text, .lfe-glow-text, .lfe-underline, .lfe-glow-box
) {
  --lfe-fx-color: #57c1dc;
}

/* ---- classes de cor (setters da variável) ---- */
.lfe-fx-cyan   { --lfe-fx-color: #57c1dc; }
.lfe-fx-blue   { --lfe-fx-color: #3b82f6; }
.lfe-fx-red    { --lfe-fx-color: #ef4444; }
.lfe-fx-green  { --lfe-fx-color: #22c55e; }
.lfe-fx-gold   { --lfe-fx-color: #f5b301; }
.lfe-fx-purple { --lfe-fx-color: #a855f7; }
.lfe-fx-white  { --lfe-fx-color: #ffffff; }

/* ---- texto de destaque (2ª tipografia) — efeito .lfe-accent ---- */
.lfe-accent, .lfe-accent .elementor-heading-title, .lfe-accent .elementor-widget-container {
  font-family: var(--lfe-accent-font, "Playfair Display"), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--lfe-fx-color, var(--lfe-accent-color, #a07828));
}

/* =====================  BOTÕES  ===================== */

/* .lfe-glow / .lfe-border-run — anel de luz girando (só na borda) */
.lfe-glow .elementor-button,
.lfe-border-run .elementor-button { position: relative; z-index: 0; }
.lfe-glow .elementor-button::before,
.lfe-border-run .elementor-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--lfe-a),
    transparent 0deg, transparent 250deg,
    var(--lfe-fx-color) 300deg, #ffffff 330deg, transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: lfe-spin 2.4s linear infinite;
  pointer-events: none;
}

/* .lfe-glow / .lfe-glow-soft — glow pulsante */
.lfe-glow .elementor-button,
.lfe-glow-soft .elementor-button { animation: lfe-pulse-glow 2.2s ease-in-out infinite; }

/* .lfe-shine — brilho passando no hover */
.lfe-shine .elementor-button { position: relative; overflow: hidden; }
.lfe-shine .elementor-button::after {
  content: "";
  position: absolute; top: 0; left: -150%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.lfe-shine .elementor-button:hover::after { animation: lfe-shine 0.9s ease; }

/* .lfe-fill — preenchimento varre no hover */
.lfe-fill .elementor-button { position: relative; overflow: hidden; }
.lfe-fill .elementor-button::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(-101%); transition: transform 0.35s ease; pointer-events: none;
}
.lfe-fill .elementor-button:hover::before { transform: translateX(0); }

/* .lfe-grow — cresce no hover */
.lfe-grow .elementor-button { transition: transform 0.18s ease; }
.lfe-grow .elementor-button:hover { transform: scale(1.05); }

/* =====================  TÍTULOS  ===================== */

/* .lfe-gradient-text — texto com gradiente */
.lfe-gradient-text .elementor-heading-title {
  background: linear-gradient(90deg, var(--lfe-fx-color), #ffffff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* .lfe-glow-text — brilho pulsante no texto */
.lfe-glow-text .elementor-heading-title { animation: lfe-text-glow 2.2s ease-in-out infinite; }

/* .lfe-underline — sublinhado animado no hover */
.lfe-underline .elementor-heading-title { position: relative; display: inline-block; }
.lfe-underline .elementor-heading-title::after {
  content: "";
  position: absolute; left: 0; bottom: -4px; height: 3px; width: 100%;
  background: var(--lfe-fx-color);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
.lfe-underline:hover .elementor-heading-title::after { transform: scaleX(1); }

/* =====================  ELEMENTOS  ===================== */

/* .lfe-lift — eleva no hover */
.lfe-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.lfe-lift:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28); }

/* .lfe-pulse — pulsa de leve */
.lfe-pulse { animation: lfe-scale-pulse 1.9s ease-in-out infinite; }

/* .lfe-glow-box — glow ao redor do elemento (card/imagem) */
.lfe-glow-box { animation: lfe-box-glow 2.4s ease-in-out infinite; }

/* ---- keyframes ---- */
@keyframes lfe-spin { to { --lfe-a: 360deg; } }
@keyframes lfe-pulse-glow {
  0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--lfe-fx-color) 45%, transparent); }
  50%      { box-shadow: 0 0 30px color-mix(in srgb, var(--lfe-fx-color) 85%, transparent); }
}
@keyframes lfe-shine { to { left: 150%; } }
@keyframes lfe-scale-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes lfe-text-glow {
  0%, 100% { text-shadow: 0 0 6px color-mix(in srgb, var(--lfe-fx-color) 40%, transparent); }
  50%      { text-shadow: 0 0 18px color-mix(in srgb, var(--lfe-fx-color) 90%, transparent); }
}
@keyframes lfe-box-glow {
  0%, 100% { box-shadow: 0 0 12px color-mix(in srgb, var(--lfe-fx-color) 35%, transparent); }
  50%      { box-shadow: 0 0 30px color-mix(in srgb, var(--lfe-fx-color) 75%, transparent); }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .lfe-glow .elementor-button, .lfe-glow .elementor-button::before,
  .lfe-glow-soft .elementor-button,
  .lfe-border-run .elementor-button::before,
  .lfe-glow-text .elementor-heading-title,
  .lfe-pulse, .lfe-glow-box { animation: none; }
  .lfe-lift, .lfe-grow .elementor-button,
  .lfe-fill .elementor-button::before,
  .lfe-underline .elementor-heading-title::after { transition: none; }
}