/* ============================================================
   FX — Efeitos visuais profissionais (Vegas Automatizador)
   ============================================================ */

/* ── Canvas de partículas ── */
.fx-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.85;
}

/* ── Aurora mesh animada ── */
.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.bg-aurora::before,
.bg-aurora::after {
  content: '';
  position: absolute;
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  background:
    radial-gradient(ellipse 40% 30% at 30% 20%, rgba(18, 199, 122, 0.18), transparent 60%),
    radial-gradient(ellipse 35% 25% at 70% 60%, rgba(14, 159, 95, 0.14), transparent 55%),
    radial-gradient(ellipse 25% 20% at 50% 80%, rgba(46, 232, 154, 0.1), transparent 50%);
  animation: auroraDrift 18s ease-in-out infinite alternate;
}
.bg-aurora::after {
  animation-delay: -9s;
  animation-direction: alternate-reverse;
  opacity: 0.7;
  filter: blur(40px);
}
@keyframes auroraDrift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate(3%, -2%) rotate(2deg) scale(1.05); }
  66%  { transform: translate(-2%, 4%) rotate(-1deg) scale(0.98); }
  100% { transform: translate(4%, 2%) rotate(3deg) scale(1.03); }
}

/* ── Scanlines sutis (efeito HUD) ── */
.bg-scanlines {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.03;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(18, 199, 122, 0.15) 2px,
    rgba(18, 199, 122, 0.15) 4px
  );
}

/* ── Grão fotográfico ── */
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── Glass holográfico ── */
.glass.fx-glass {
  overflow: hidden;
}
.glass.fx-glass.panel-road,
.glass.fx-glass:has(.road-grid) {
  overflow: visible;
}
.glass.fx-glass::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    transparent 0%,
    rgba(18, 199, 122, 0.7) 10%,
    transparent 22%,
    transparent 50%,
    rgba(46, 232, 154, 0.5) 65%,
    rgba(18, 199, 122, 0.6) 72%,
    transparent 85%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.65;
  pointer-events: none;
  animation: borderSpin 8s linear infinite;
}
.glass.fx-glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(18, 199, 122, 0.08) 50%, transparent 60%);
  pointer-events: none;
  animation: glassSweep 6s ease-in-out infinite;
}
@keyframes borderSpin { to { --border-angle: 360deg; } }
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes glassSweep {
  0%, 100% { left: -100%; opacity: 0; }
  50%      { left: 150%; opacity: 1; }
}

/* ── Entrada em cascata ── */
.fx-reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  filter: blur(6px);
  transition:
    opacity 0.7s var(--ease-premium),
    transform 0.7s var(--ease-premium),
    filter 0.7s var(--ease-premium);
}
.fx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.fx-reveal[data-delay="1"] { transition-delay: 0.08s; }
.fx-reveal[data-delay="2"] { transition-delay: 0.16s; }
.fx-reveal[data-delay="3"] { transition-delay: 0.24s; }
.fx-reveal[data-delay="4"] { transition-delay: 0.32s; }
.fx-reveal[data-delay="5"] { transition-delay: 0.4s; }
.fx-reveal[data-delay="6"] { transition-delay: 0.48s; }

/* ── Logo pulsante com anéis ── */
.fx-logo-wrap {
  position: relative;
  display: inline-flex;
}
.fx-logo-wrap::before,
.fx-logo-wrap::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(18, 199, 122, 0.35);
  animation: logoRing 3s ease-out infinite;
}
.fx-logo-wrap::after {
  animation-delay: 1.5s;
  inset: -22px;
  border-color: rgba(18, 199, 122, 0.2);
}
@keyframes logoRing {
  0%   { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ── Botão com ripple + glow ── */
.btn.fx-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn.fx-btn .btn-glow {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--grad-primary);
  filter: blur(12px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.btn.fx-btn:hover .btn-glow { opacity: 0.6; }
.btn.fx-btn .btn-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 48%, transparent 66%);
  transform: translateX(-140%);
  pointer-events: none;
}
.btn.fx-btn:hover .btn-shine { animation: btnShine 0.85s ease; }
@keyframes btnShine { to { transform: translateX(140%); } }

/* ── Login: portal de conexão ── */
.fx-portal {
  position: relative;
}
.fx-portal.is-connecting::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: inherit;
  border: 2px solid rgba(18, 199, 122, 0.5);
  animation: portalExpand 1.4s ease-out infinite;
  pointer-events: none;
}
@keyframes portalExpand {
  0%   { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1.08); opacity: 0; }
}

/* ── Dados 3D ── */
.die.fx-die {
  perspective: 120px;
  transition: transform 0.1s ease;
}
.die.fx-die.rolling {
  animation: dieRoll 0.12s linear infinite;
  color: var(--color-player-bright) !important;
  border-color: var(--color-player) !important;
  box-shadow: 0 0 16px var(--color-player-glow);
}
@keyframes dieRoll {
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  25%  { transform: rotateX(90deg) rotateY(45deg); }
  50%  { transform: rotateX(180deg) rotateY(90deg); }
  75%  { transform: rotateX(270deg) rotateY(135deg); }
  100% { transform: rotateX(360deg) rotateY(180deg); }
}

.duel-side.fx-winner {
  animation-duration: 1.2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.duel-player.fx-winner {
  border-color: var(--color-player) !important;
  background: rgba(0, 123, 255, 0.12) !important;
  animation-name: duelWinPlayer;
}
.duel-player.fx-winner .duel-sum {
  color: var(--color-player-bright);
  text-shadow: 0 0 18px var(--color-player-glow);
}
.duel-banker.fx-winner {
  border-color: var(--color-banker) !important;
  background: rgba(237, 1, 3, 0.12) !important;
  animation-name: duelWinBanker;
}
.duel-banker.fx-winner .duel-sum {
  color: var(--color-banker-bright);
  text-shadow: 0 0 18px var(--color-banker-glow);
}
@keyframes duelWinPlayer {
  0%   { box-shadow: 0 0 20px var(--color-player-glow); }
  100% { box-shadow: 0 0 40px var(--color-player-glow), inset 0 0 30px rgba(0, 123, 255, 0.12); }
}
@keyframes duelWinBanker {
  0%   { box-shadow: 0 0 20px var(--color-banker-glow); }
  100% { box-shadow: 0 0 40px var(--color-banker-glow), inset 0 0 30px rgba(237, 1, 3, 0.12); }
}

.duel-vs.fx-vs span {
  display: inline-block;
  animation: vsPulse 2s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(18, 199, 122, 0.6);
}
@keyframes vsPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.15); opacity: 1; color: var(--vegas-bright); }
}

/* ── Road balls ── */
.road-ball.fx-ball-in {
  animation: ballDrop 0.55s var(--ease-premium) backwards;
}
@keyframes ballDrop {
  0%   { transform: scale(0) translateY(-20px); opacity: 0; filter: blur(4px); }
  60%  { transform: scale(1.15) translateY(2px); }
  100% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
}
.road-ball.fx-ball-new {
  animation: ballPop 0.6s var(--ease-premium);
}
@keyframes ballPop {
  0%   { transform: scale(0); box-shadow: 0 0 0 transparent; }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ── Radar avançado ── */
.engine-radar-wrap { position: relative; }

.radar-ticks {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(18, 199, 122, 0.45) 0deg 1.2deg,
    transparent 1.2deg 30deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  opacity: 0.55;
  animation: radarTicksSpin 60s linear infinite;
}
@keyframes radarTicksSpin { to { transform: rotate(-360deg); } }

.radar-ping {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(18, 199, 122, 0.5);
  opacity: 0;
  animation: radarPing 3.2s cubic-bezier(0.15, 0.6, 0.35, 1) infinite;
}
.radar-ping.p2 { animation-delay: 1.6s; }
.radar-ping.p3 { animation-delay: 3.2s; inset: 24px; }
@keyframes radarPing {
  0%   { transform: scale(0.35); opacity: 0.7; }
  70%  { opacity: 0; }
  100% { transform: scale(1.1); opacity: 0; }
}

.radar-orbit {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  animation: sweepSpin 4s linear infinite;
}
.radar-orbit-dot {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vegas-bright);
  box-shadow: 0 0 14px var(--vegas-bright), 0 0 4px #fff;
  transform: translateX(-50%);
}

.radar-blips { position: absolute; inset: 0; pointer-events: none; }
.radar-blip {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vegas-bright);
  box-shadow: 0 0 12px var(--vegas-bright), 0 0 3px #fff;
  transform: translate(-50%, -50%);
  animation: blipFade 2s ease forwards;
}
@keyframes blipFade {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
}

.radar-burst {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
}
.radar-burst.burst-play {
  animation: radarBurst 0.8s cubic-bezier(0.15, 0.75, 0.35, 1);
}
@keyframes radarBurst {
  0%   { transform: scale(0.5); opacity: 1; border-color: var(--vegas-bright); box-shadow: 0 0 40px var(--vegas); }
  100% { transform: scale(2); opacity: 0; border-color: transparent; box-shadow: none; }
}

.radar-scanline {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.radar-scanline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(46, 232, 154, 0.8), transparent);
  box-shadow: 0 0 12px rgba(18, 199, 122, 0.8);
  animation: scanLineMove 2.5s ease-in-out infinite;
}
@keyframes scanLineMove {
  0%   { top: 10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}

.engine-radar.state-idle .radar-sweep { animation-play-state: paused; opacity: 0.12; }
.engine-radar.state-idle .radar-core { color: var(--text-muted); box-shadow: none; animation: none; }
.engine-radar.state-idle .radar-core span { animation: none; }
.engine-radar.state-idle .radar-ping { animation-play-state: paused; opacity: 0; }
.engine-radar.state-idle .radar-orbit { animation-play-state: paused; opacity: 0.25; }
.engine-radar.state-idle .radar-ticks { animation-play-state: paused; opacity: 0.2; }
.engine-radar.state-idle .radar-scanline::after { animation-play-state: paused; opacity: 0; }

.engine-radar.state-analyzing .radar-sweep { animation-duration: 0.75s; filter: drop-shadow(0 0 12px rgba(18,199,122,0.6)); }
.engine-radar.state-analyzing .radar-core { animation: corePulse 1.5s ease-in-out infinite; color: var(--vegas-bright); }
.engine-radar.state-analyzing .radar-ping { animation-duration: 1.2s; }
.engine-radar.state-analyzing .radar-orbit { animation-duration: 1.2s; }

.engine-radar.state-entry .radar-sweep {
  animation-duration: 0.5s;
  background: conic-gradient(from 0deg, rgba(243,156,18,0) 0deg, rgba(243,156,18,0.35) 300deg, rgba(255,220,140,0.95) 352deg, rgba(243,156,18,0) 360deg);
}
.engine-radar.state-entry .radar-core { color: var(--amber); animation: corePulse 0.8s ease-in-out infinite; }

.engine-radar.state-win .radar-core { color: var(--green); animation: coreWin 0.6s ease; }
@keyframes coreWin {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); box-shadow: 0 0 60px rgba(18,199,122,0.8) inset; }
  100% { transform: scale(1); }
}

@keyframes corePulse {
  0%, 100% { box-shadow: 0 0 30px rgba(18, 199, 122, 0.3) inset; transform: scale(1); }
  50%      { box-shadow: 0 0 50px rgba(18, 199, 122, 0.6) inset; transform: scale(1.05); }
}

.radar-core span { display: inline-block; animation: coreIconSpin 8s linear infinite; }
.engine-radar.state-idle .radar-core span { animation: none; }
@keyframes coreIconSpin {
  0%, 90%  { transform: rotate(0deg); }
  100%     { transform: rotate(360deg); }
}

/* ── Pipeline energia ── */
.pipe-step.active .pipe-dot {
  animation: pipeGlow 1.2s ease-in-out infinite;
}
@keyframes pipeGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(243,156,18,0.65); }
  50%      { box-shadow: 0 0 28px rgba(243,156,18,1), 0 0 40px rgba(18,199,122,0.4); }
}
.pipe-line.lit {
  position: relative;
  overflow: hidden;
}
.pipe-line.lit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  animation: energyFlow 1s linear infinite;
}
@keyframes energyFlow {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ── Status text glitch sutil ── */
.engine-status-line.fx-glitch {
  animation: statusFade 0.4s ease;
}
@keyframes statusFade {
  0%   { opacity: 0.3; transform: translateX(-4px); filter: blur(2px); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* ── Console ── */
.console-line.fx-line-in {
  animation: consoleIn 0.45s var(--ease-premium) backwards;
}
@keyframes consoleIn {
  0%   { opacity: 0; transform: translateX(-16px); filter: blur(3px); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}
.console-feed.fx-typing::after {
  content: '▋';
  color: var(--vegas-bright);
  animation: cursorBlink 0.8s step-end infinite;
  margin-left: 2px;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ── Stats counter glow ── */
.stat-box.fx-stat-pop {
  animation: statPop 0.5s var(--ease-premium);
}
@keyframes statPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); border-color: var(--vegas); box-shadow: 0 0 25px rgba(18,199,122,0.4); }
  100% { transform: scale(1); }
}

/* ── Badge conexão — onda ── */
.badge.fx-connected {
  animation: badgeConnect 0.6s var(--ease-premium);
}
@keyframes badgeConnect {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.badge-live .dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  animation: dotWave 2s ease-out infinite;
}
.badge-live .dot { position: relative; }

@keyframes dotWave {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── Celebração GREEN ── */
.fx-celebration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 800;
  overflow: hidden;
}
.fx-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: celebrateFly 1.2s ease-out forwards;
}
@keyframes celebrateFly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ── Tab transition (template 3) ── */
.tab-panel.fx-tab-in {
  animation: tabIn 0.4s var(--ease-premium);
}
@keyframes tabIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ── Número count-up shimmer ── */
.fx-count { display: inline-block; }
.fx-count.counting {
  animation: countShimmer 0.3s ease;
}
@keyframes countShimmer {
  0%   { filter: brightness(1.5); transform: scale(1.05); }
  100% { filter: brightness(1); transform: scale(1); }
}

/* ── Tilt 3D nos painéis ── */
.panel.fx-tilt {
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d;
}

/* ── Header energy line ── */
.app-header.fx-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--vegas-bright), transparent);
  animation: headerScan 4s ease-in-out infinite;
}
@keyframes headerScan {
  0%   { left: -30%; }
  100% { left: 100%; }
}

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