/* =====================================================================
   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;
  }
}


/* ---------- LP motion layer ---------- */
@keyframes exo-reveal-rise {
  0% { opacity: 0; transform: translate3d(0, 28px, 0) scale(.985); filter: blur(8px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes exo-soft-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -6px, 0) scale(1.01); }
}

@keyframes exo-border-sweep {
  0% { transform: translateX(-120%); opacity: 0; }
  18%, 70% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

@keyframes exo-progress-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 190, 1, .28); }
  50% { box-shadow: 0 0 24px rgba(255, 190, 1, .55); }
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.985);
  filter: blur(8px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out), filter .75s var(--ease-out);
  transition-delay: calc(var(--reveal-order, 0) * 55ms);
  will-change: opacity, transform, filter;
}

.reveal.active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.rd1 { --reveal-order: 1; }
.rd2 { --reveal-order: 2; }
.rd3 { --reveal-order: 3; }
.rd4 { --reveal-order: 4; }
.rd5 { --reveal-order: 5; }
.rd6 { --reveal-order: 6; }
.rd7 { --reveal-order: 7; }
.rd8 { --reveal-order: 8; }

.btn,
.button,
.nav-links a,
.nav-dropdown-toggle,
.market-nav-btn,
.geo-arrow,
.footer-social {
  transition: transform .24s var(--ease-out), box-shadow .24s var(--ease-out), border-color .24s var(--ease-out), background-color .24s var(--ease-out), color .24s var(--ease-out);
}

.btn:hover,
.button:hover,
.market-nav-btn:hover,
.geo-arrow:hover,
.footer-social:hover {
  transform: translateY(-2px);
}

.btn-primary,
.button-primary {
  animation: eo-pulse-glow 3.8s ease-in-out infinite;
}

.hero-video-container,
.pay-globe,
.geo-flag-badge {
  animation: exo-soft-breathe 7s ease-in-out infinite;
}

.market-category-card,
.step-card,
.faq-item,
.geo-card,
.testi-card,
.pay-stat,
.pay-side,
.infra-card {
  transition: transform .32s var(--ease-out), border-color .32s var(--ease-out), box-shadow .32s var(--ease-out), background-color .32s var(--ease-out);
}

.market-category-card:hover,
.step-card:hover,
.faq-item:hover,
.geo-card:hover,
.testi-card:hover,
.pay-stat:hover,
.pay-side:hover,
.infra-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 190, 1, .34);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 190, 1, .08);
}

.market-category-card::after,
.step-card::after,
.geo-card::after,
.testi-card::after,
.pay-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 240, 194, .16) 48%, transparent 72%);
  transform: translateX(-120%);
  opacity: 0;
}

.market-category-card:hover::after,
.step-card:hover::after,
.geo-card:hover::after,
.testi-card:hover::after,
.pay-stat:hover::after {
  animation: exo-border-sweep .9s var(--ease-out);
}

.scroll-progress {
  animation: exo-progress-glow 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.active {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .btn-primary,
  .button-primary,
  .hero-video-container,
  .pay-globe,
  .geo-flag-badge,
  .scroll-progress {
    animation: none !important;
  }
}