/**
 * Efeitos visuais e elementos de trading para a página de login
 * Adiciona gráficos, elementos de mercado financeiro e efeitos imersivos
 */

:root {
  --primary-color: #2c578a;
  --primary-light: rgba(44, 87, 138, 0.1);
  --text-color: #ffffff;
  --chart-green: #26de81;
  --chart-red: #eb3b5a;
}

/* Efeito de fundo com gráficos de trading */
.login-container {
  position: relative;
}

/* Efeito de gráficos de candlestick no fundo */
.trading-chart-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 30 V70 M20 40 H30 M20 60 H30 M30 40 V60 M50 20 V80 M50 30 H60 M50 70 H60 M60 30 V70 M80 40 V80 M80 50 H90 M80 70 H90 M90 50 V70' stroke='%232c578a' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  z-index: 1;
  pointer-events: none;
}

/* Gráfico de linha animado */
.line-chart {
  position: absolute;
  bottom: 20%;
  left: 0;
  width: 100%;
  height: 60px;
  opacity: 0.1;
  overflow: hidden;
}

.line-chart::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1000%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='500' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 Q50 10, 100 40 T200 30 T300 45 T400 25 T500 35' stroke='%232c578a' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  animation: chartMove 60s linear infinite;
}

@keyframes chartMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Efeito de números flutuantes (ticker) */
.ticker-numbers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ticker-number {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  opacity: 0;
  color: var(--primary-color);
  animation: tickerFade 10s linear infinite;
}

@keyframes tickerFade {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  10% {
    opacity: 0.1;
  }
  90% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100px);
  }
}

/* Partículas flutuantes (indicadores de trading) */
.trading-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  animation: particleFloat 15s ease-in-out infinite;
}

.particle-bull {
  background-color: var(--chart-green);
}

.particle-bear {
  background-color: var(--chart-red);
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0);
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: translateY(-200px) translateX(100px);
  }
}

/* Efeito de hover mais simples no card principal */
.main-card {
  transition: all 0.3s ease-out;
}

.card-hover {
  box-shadow: 0 15px 35px rgba(44, 87, 138, 0.2);
  transform: translateY(-5px);
}

/* Cursor personalizado */
.custom-cursor {
  cursor: none;
}

.custom-cursor-element {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  background-color: rgba(44, 87, 138, 0.1);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
  opacity: 0;
  mix-blend-mode: difference;
  animation: cursorPulse 2s infinite;
}

@keyframes cursorPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* Efeito de pulsação nos elementos de métrica */
.metrics-container .metric-value {
  position: relative;
  animation: metricPulse 3s infinite;
}

@keyframes metricPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Efeito de botão especial com brilho */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0)
  );
  transform: rotate(30deg);
  animation: buttonShine 5s infinite linear;
  pointer-events: none;
}

@keyframes buttonShine {
  from {
    transform: rotate(30deg) translateX(-300%);
  }
  to {
    transform: rotate(30deg) translateX(300%);
  }
}

/* Melhorias na responsividade */
@media (max-width: 1200px) {
  .main-card {
    width: 95%;
    max-width: 1000px;
  }
}

@media (max-width: 992px) {
  .main-card {
    height: auto;
    min-height: 90vh;
  }
  
  .content-side, .form-side {
    padding: 40px 30px;
  }
}

@media (max-width: 768px) {
  .main-card {
    flex-direction: column;
    height: auto;
  }
  
  .content-side {
    padding: 30px;
    order: 1;
  }
  
  .form-side {
    width: 100%;
    order: 2;
    padding: 30px;
    box-shadow: none;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  .brand-subtitle {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .main-card {
    width: 100%;
    border-radius: 0;
    min-height: 100vh;
  }
  
  .content-side, .form-side {
    padding: 20px;
  }
  
  .social-buttons {
    flex-direction: column;
    gap: 10px;
  }
  
  .social-btn {
    width: 100%;
  }
  
  .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}