/* index.css - Estilos globais e customizados para o EvaFlow.com.br */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

:root {
  --color-bg: #050505;
  --color-bg-card: #0A0A0A;
  --color-primary: #00E5FF; /* Ciano T-Radar */
  --color-secondary: #00E676; /* Verde TRI */
  --color-tertiary: #B388FF; /* Roxo Dashboards */
  --font-main: 'Plus Jakarta Sans', sans-serif;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: #ffffff;
  overflow-x: hidden;
}

/* Grade T-Radar sutil */
.bg-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}

/* Scroll Reveal (Animações nativas de rolagem) */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Custom Scrollbar Premium */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Estilo de seleção personalizado */
::selection {
  background-color: var(--color-primary);
  color: #000000;
}

/* Micro-interações */
.btn-premium {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-premium::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.btn-premium:hover::after {
  transform: translateX(100%);
}

/* Animações com Máscara GSAP */
.reveal-parent {
  overflow: hidden;
  position: relative;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

.reveal-child {
  display: block;
  transform: translateY(105%); /* Esconde inicialmente para evitar flash visual */
}

/* Painéis de Rolagem Horizontal */
.panel {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
}