/* ============================================================
   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(2, 241, 254, 0.18), transparent 60%),
    radial-gradient(ellipse 35% 25% at 70% 60%, rgba(123, 31, 176, 0.14), transparent 55%),
    radial-gradient(ellipse 25% 20% at 50% 80%, rgba(2, 241, 254, 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(2, 241, 254, 0.15) 2px,
    rgba(2, 241, 254, 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(2, 241, 254, 0.7) 10%,
    transparent 22%,
    transparent 50%,
    rgba(2, 241, 254, 0.5) 65%,
    rgba(2, 241, 254, 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(2, 241, 254, 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; }

.fx-logo-wrap {
  position: relative;
  display: inline-flex;
}

/* ── 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(2, 241, 254, 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(2, 241, 254, 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 HUD (núcleo neural) ── */
.engine-radar-wrap {
  position: relative;
  width: 248px;
  height: 248px;
  margin: 4px auto 28px;
  display: grid;
  place-items: center;
}
.radar-halo {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 241, 254, 0.38) 0%, rgba(2, 241, 254, 0.08) 42%, transparent 70%);
  filter: blur(10px);
  animation: haloBreathe 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes haloBreathe {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50%      { opacity: 1; transform: scale(1.06); }
}

.engine-radar-wrap::after {
  content: 'STANDBY';
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--text-muted);
  z-index: 6;
  pointer-events: none;
}
.engine-radar-wrap:has(.state-scanning)::after { content: 'WATCH'; color: var(--vegas-bright); }
.engine-radar-wrap:has(.state-analyzing)::after { content: 'LIVE SCAN'; color: var(--vegas-bright); }
.engine-radar-wrap:has(.state-entry)::after { content: 'ENTRY'; color: var(--amber); }
.engine-radar-wrap:has(.state-win)::after { content: 'GREEN'; color: var(--vegas-bright); }
.engine-radar-wrap:has(.state-loss)::after { content: 'LOSS'; color: var(--red); }

.engine-radar {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(2, 241, 254, 0.22), transparent 48%),
    radial-gradient(circle at 50% 50%, #141018 0%, #0a0a0a 72%);
  box-shadow:
    0 0 0 1px rgba(2, 241, 254, 0.28),
    0 0 36px rgba(2, 241, 254, 0.22),
    inset 0 0 42px rgba(2, 241, 254, 0.1);
  overflow: hidden;
}

.radar-frame { position: absolute; inset: 8px; pointer-events: none; z-index: 5; }
.rf {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(2, 241, 254, 0.7);
}
.rf-nw { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.rf-ne { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
.rf-sw { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 4px; }
.rf-se { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }

.radar-hex {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  color: rgba(2, 241, 254, 0.55);
  animation: hexSpin 28s linear infinite;
  filter: drop-shadow(0 0 6px rgba(2, 241, 254, 0.35));
  pointer-events: none;
  z-index: 1;
}
.radar-hex polygon {
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linejoin: round;
}
@keyframes hexSpin { to { transform: rotate(360deg); } }

.radar-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
}
.radar-cross::before,
.radar-cross::after {
  content: '';
  position: absolute;
  background: linear-gradient(var(--vegas), transparent, var(--vegas));
  opacity: 0.45;
}
.radar-cross::before {
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 1px;
  transform: translateX(-50%);
}
.radar-cross::after {
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--vegas), transparent, var(--vegas));
}

.radar-ticks {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(2, 241, 254, 0.7) 0deg 1deg,
    transparent 1deg 18deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  opacity: 0.7;
  animation: radarTicksSpin 24s linear infinite;
  z-index: 1;
}
@keyframes radarTicksSpin { to { transform: rotate(-360deg); } }

.radar-ring {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(2, 241, 254, 0.22);
  z-index: 1;
}
.radar-ring.r2 { inset: 36px; border-color: rgba(2, 241, 254, 0.16); }
.radar-ring.r3 {
  inset: 54px;
  border-style: dashed;
  border-color: rgba(2, 241, 254, 0.28);
  animation: radarTicksSpin 16s linear infinite reverse;
}

.radar-arc {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  z-index: 2;
  pointer-events: none;
}
.radar-arc-a {
  inset: 14px;
  border-top-color: var(--vegas-bright);
  border-right-color: rgba(2, 241, 254, 0.15);
  animation: sweepSpin 3.4s linear infinite;
  filter: drop-shadow(0 0 6px var(--vegas-bright));
}
.radar-arc-b {
  inset: 28px;
  border-bottom-color: var(--vegas);
  border-left-color: rgba(2, 241, 254, 0.12);
  animation: sweepSpin 5.6s linear infinite reverse;
}

.radar-ping {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(2, 241, 254, 0.5);
  opacity: 0;
  animation: radarPing 2.8s cubic-bezier(0.15, 0.6, 0.35, 1) infinite;
  z-index: 2;
}
.radar-ping.p2 { animation-delay: 0.9s; }
.radar-ping.p3 { animation-delay: 1.8s; inset: 38px; }
@keyframes radarPing {
  0%   { transform: scale(0.4); opacity: 0.75; }
  70%  { opacity: 0; }
  100% { transform: scale(1.08); opacity: 0; }
}

.radar-sweep {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(2, 241, 254, 0.02) 220deg,
    rgba(2, 241, 254, 0.28) 318deg,
    rgba(2, 241, 254, 0.95) 348deg,
    transparent 360deg
  );
  animation: sweepSpin 2.4s linear infinite;
  z-index: 2;
  mix-blend-mode: screen;
}
@keyframes sweepSpin { to { transform: rotate(360deg); } }

.radar-orbit {
  position: absolute;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
}
.radar-orbit.o1 { inset: 32px; animation: sweepSpin 3.8s linear infinite; }
.radar-orbit.o2 { inset: 48px; animation: sweepSpin 6.2s linear infinite reverse; }
.radar-orbit-dot {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px var(--vegas-bright), 0 0 22px var(--vegas);
  transform: translateX(-50%);
}
.radar-orbit.o2 .radar-orbit-dot {
  width: 5px;
  height: 5px;
  background: var(--vegas-bright);
}

.radar-blips { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.radar-blip {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px var(--vegas-bright), 0 0 18px var(--vegas);
  transform: translate(-50%, -50%);
  animation: blipFade 1.8s ease forwards;
}
@keyframes blipFade {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}

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

.radar-scanline {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.radar-scanline::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(2, 241, 254, 0.9), transparent);
  box-shadow: 0 0 14px rgba(2, 241, 254, 0.85);
  animation: scanLineMove 2.2s ease-in-out infinite;
}
@keyframes scanLineMove {
  0%   { top: 12%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 82%; opacity: 0; }
}

.radar-core {
  position: absolute;
  inset: 72px;
  border-radius: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--vegas-bright);
  background:
    radial-gradient(circle at 35% 30%, rgba(2, 241, 254, 0.45), transparent 55%),
    radial-gradient(circle at 50% 50%, #1a1024, #0c0c0c 70%);
  border: 1px solid rgba(2, 241, 254, 0.45);
  box-shadow:
    0 0 18px rgba(2, 241, 254, 0.45),
    inset 0 0 16px rgba(2, 241, 254, 0.35);
}
.radar-core span { display: inline-block; animation: coreIconSpin 7s linear infinite; }
@keyframes coreIconSpin {
  0%, 88% { transform: rotate(0deg) scale(1); }
  100%    { transform: rotate(360deg) scale(1); }
}
@keyframes corePulse {
  0%, 100% { box-shadow: 0 0 18px rgba(2, 241, 254, 0.4), inset 0 0 16px rgba(2, 241, 254, 0.3); transform: scale(1); }
  50%      { box-shadow: 0 0 34px rgba(2, 241, 254, 0.75), inset 0 0 22px rgba(2, 241, 254, 0.55); transform: scale(1.06); }
}
@keyframes coreWin {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); box-shadow: 0 0 50px rgba(2, 241, 254, 0.9) inset; }
  100% { transform: scale(1); }
}

.engine-radar.state-idle .radar-sweep,
.engine-radar.state-idle .radar-arc,
.engine-radar.state-idle .radar-orbit,
.engine-radar.state-idle .radar-hex,
.engine-radar.state-idle .radar-ticks,
.engine-radar.state-idle .radar-ring.r3 { animation-play-state: paused; }
.engine-radar.state-idle .radar-sweep { opacity: 0.1; }
.engine-radar.state-idle .radar-arc { opacity: 0.25; }
.engine-radar.state-idle .radar-core {
  color: var(--text-muted);
  box-shadow: none;
  animation: none;
  border-color: var(--border-glass-strong);
}
.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 { opacity: 0.2; }
.engine-radar.state-idle .radar-ticks { opacity: 0.18; }
.engine-radar.state-idle .radar-scanline::after { animation-play-state: paused; opacity: 0; }
.engine-radar-wrap:has(.state-idle) .radar-halo { opacity: 0.28; animation: none; }

.engine-radar.state-scanning .radar-sweep { animation-duration: 1.7s; opacity: 1; }
.engine-radar.state-scanning .radar-core { color: var(--vegas-bright); }

.engine-radar.state-analyzing .radar-sweep {
  animation-duration: 0.7s;
  filter: drop-shadow(0 0 12px rgba(2, 241, 254, 0.7));
}
.engine-radar.state-analyzing .radar-core { animation: corePulse 1.3s ease-in-out infinite; color: var(--vegas-bright); }
.engine-radar.state-analyzing .radar-ping { animation-duration: 1.1s; }
.engine-radar.state-analyzing .radar-orbit.o1 { animation-duration: 1.4s; }
.engine-radar.state-analyzing .radar-arc-a { animation-duration: 1.1s; }

.engine-radar.state-entry .radar-sweep {
  animation-duration: 0.45s;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(243,156,18,0.3) 300deg, rgba(255,220,140,0.95) 350deg, transparent 360deg);
}
.engine-radar.state-entry .radar-core { color: var(--amber); animation: corePulse 0.7s ease-in-out infinite; border-color: rgba(243, 156, 18, 0.65); }
.engine-radar.state-entry .radar-orbit-dot { background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.engine-radar.state-entry .rf { border-color: var(--amber); }

.engine-radar.state-win .radar-core { color: var(--green); animation: coreWin 0.6s ease; }
.engine-radar.state-win .radar-sweep { animation-play-state: paused; }

.engine-radar.state-loss .radar-core { color: var(--red); border-color: rgba(231, 76, 60, 0.7); }
.engine-radar.state-loss .radar-sweep { animation-play-state: paused; opacity: 0.35; }
.engine-radar.state-loss .rf { border-color: var(--red); }

/* ── 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(2, 241, 254,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(2, 241, 254,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; }
}