/*
 * ============================================================
 * Hábilis Consultoria Ambiental — Landing Page
 * Estilos customizados (complementares ao Tailwind CSS)
 * ============================================================
 */

/* ============================================================
   1. DESIGN TOKENS / VARIÁVEIS CSS
   ============================================================ */
:root {
  --color-green-primary: #4ec97e;
  --color-green-light: #a8f0c2;
  --color-gold-primary: #f0b429;
  --color-gold-light: #fde68a;
  --color-bg-dark: #080f0a;
  --color-bg-section: #0a1510;

  --transition-default: 0.65s ease;
  --transition-fast: 0.22s ease;
}

/* ============================================================
   2. RESET COMPLEMENTAR
   ============================================================ */
details summary::-webkit-details-marker {
  display: none;
}

details summary {
  list-style: none;
}

/* ============================================================
   3. BACKGROUNDS / PADRÕES
   ============================================================ */

/* Padrão de pontos no hero */
.dot-pattern {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Padrão de linhas verticais nas sections alternadas */
.line-pattern {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 80px
  );
}

/* ============================================================
   4. GRADIENTES DE TEXTO
   ============================================================ */
.text-gradient-green {
  background: linear-gradient(135deg, #4ec97e, #a8f0c2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-gold {
  background: linear-gradient(135deg, #f0b429, #fde68a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-mixed {
  background: linear-gradient(135deg, #4ec97e, #f0b429);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}

/* ============================================================
   5. ANIMAÇÕES
   ============================================================ */

/* Shimmer nos gradientes de texto animados */
@keyframes shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

/* Flutuação suave do logo */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.float {
  animation: float 4s ease-in-out infinite;
}

/* Marquee / ticker horizontal */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pulso do dot indicador verde */
@keyframes pulseDot {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(78, 201, 126, 0.55);
  }
  60% {
    box-shadow: 0 0 0 12px rgba(78, 201, 126, 0);
  }
}

.dot-pulse {
  animation: pulseDot 2s infinite;
}

/* ============================================================
   6. COMPONENTES UTILITÁRIOS
   ============================================================ */

/* Reveal — elemento aparece ao entrar na viewport (controlado por JS) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--transition-default), transform var(--transition-default);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Hover lift — elevação sutil ao passar o mouse nos cards */
.hover-lift {
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

/* ============================================================
   7. ELEMENTOS ESPECÍFICOS
   ============================================================ */

/* Barra de progresso de leitura */
#progress-bar {
  transition: width 0.12s ease;
}

/* Inputs com focus ring personalizado
   (aplicado via JS para compatibilidade com Tailwind CDN) */
#lead-form input:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
  outline: none;
}