/* =====================================================================
   EX OPTION — Design System / Animações
   Padrões extraídos do site IQ Option + extensões premium da marca.
   ===================================================================== */

/* ---------- 1. Keyframes do site original ---------- */

/* Spin (loaders / ícones de carregamento) — original: 2.5s linear infinite */
@keyframes eo-spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* Grow vertical (barras de equalizador / loader) — original: svelte grow */
@keyframes eo-grow { 0%, 100% { height: 40%; } 50% { height: 80%; } }

/* Grow horizontal (loader-horizontal) — original: grow-shrink */
@keyframes eo-grow-shrink { 0% { width: 30%; } 100% { width: 70%; } }

/* Shake (erro de formulário / captcha) — original: .7s ease-in-out */
@keyframes eo-shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-10px); }
  30%, 70% { transform: translateX(10px); }
}

/* Skeleton / loading shimmer — original: 1.5s infinite linear */
@keyframes eo-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Move chart (faixa contínua / marquee) — original: 25s linear infinite */
@keyframes eo-move-chart { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- 2. Extensões premium (marca dourada) ---------- */

/* Brilho dourado deslizante sobre superfícies/botões */
@keyframes eo-shine {
  0%   { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}

/* Pulso de brilho (glow) ao redor de CTAs */
@keyframes eo-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,190,1,.0), var(--glow-brand-strong); }
  50%      { box-shadow: 0 0 0 6px rgba(255,190,1,.12), var(--glow-brand-strong); }
}

/* Entrada suave (fade + subida) */
@keyframes eo-fade-up {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Flutuação leve (badges, selos premium) */
@keyframes eo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- 3. Classes utilitárias ---------- */

.eo-anim-spin   { animation: eo-spin 2.5s linear infinite; }
.eo-anim-shake  { animation: eo-shake .7s ease-in-out; }
.eo-anim-float  { animation: eo-float 5s ease-in-out infinite; }
.eo-anim-fade-up { animation: eo-fade-up .6s var(--ease-out) both; }
.eo-anim-pulse-glow { animation: eo-pulse-glow 2.4s ease-in-out infinite; }

/* Skeleton de carregamento (shimmer dourado sutil) */
.eo-skeleton {
  background: linear-gradient(
    90deg,
    var(--Fill-2-default) 25%,
    var(--Fill-3-default) 37%,
    var(--Fill-2-default) 63%
  );
  background-size: 400% 100%;
  animation: eo-skeleton 1.5s infinite linear;
  border-radius: var(--radius-8);
}

/* Texto/borda com brilho dourado deslizante */
.eo-shine {
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255,240,194,.65) 50%,
    transparent 80%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: eo-shine 3.5s ease-in-out infinite;
}

/* Equalizador (3 barras) — mesmo padrão do loader original */
.eo-equalizer { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.eo-equalizer span {
  width: 3px; height: 40%;
  background: var(--Fill-Brand-default);
  border-radius: var(--radius-pill);
  animation: eo-grow 1s infinite ease-in-out;
}
.eo-equalizer span:nth-child(2) { animation-delay: .2s; }
.eo-equalizer span:nth-child(3) { animation-delay: .4s; }

/* Marquee contínuo (faixa de cotações / parceiros) */
.eo-marquee { overflow: hidden; }
.eo-marquee > * { display: inline-flex; animation: eo-move-chart 25s linear infinite; }

/* Stagger de entrada para listas (use inline --i: 0,1,2…) */
.eo-stagger > * { animation: eo-fade-up .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * .08s); }

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}