@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-slate-50 text-slate-800;
  }
  
  /* APENAS campos que COMEÇAM COM "utm_" ou "UTM_" */
  *[id^="utm_"],
  *[name^="utm_"],
  *[data-identifier^="utm_"],
  *[for^="utm_"],
  *[data-name^="utm_"],
  *[id^="UTM_"],
  *[name^="UTM_"],
  *[data-identifier^="UTM_"],
  *[for^="UTM_"],
  *[data-name^="UTM_"],
  
  /* RD Station Form específico para UTM_ */
  .bricks-form [id^="utm_"],
  .bricks-form [name^="utm_"],
  .bricks-form [id^="UTM_"],
  .bricks-form [name^="UTM_"],
  .rdstation-form [id^="utm_"],
  .rdstation-form [name^="utm_"],
  .rdstation-form [id^="UTM_"],
  .rdstation-form [name^="UTM_"],
  
  /* Campos específicos */
  .bricks-form__field[data-identifier^="utm_"],
  .bricks-form__field[data-identifier^="UTM_"],
  
  /* Campos do campo source */
  [id*="source"],
  [name*="source"],
  
  /* Labels específicos UTM_ */
  label[for^="utm_"],
  label[for^="UTM_"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
  }
}

@layer utilities {
  .bg-gradient-primary {
    @apply bg-gradient-to-br from-primary to-accent;
  }
  
  .glow {
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.4), 
                0 0 20px rgba(168, 85, 247, 0.2);
  }
  
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
  }
  
  .floating {
    animation: float 6s ease-in-out infinite;
  }

  .hero-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  .hero-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.18), transparent 70%),
      linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(30, 64, 175, 0.7));
    opacity: 0.85;
  }

  .hero-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.15;
  }

  .hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .hero-particles::before,
  .hero-particles::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    opacity: 0.45;
    animation: heroSparkle 8s ease-in-out infinite;
    filter: blur(0.4px);
  }

  .hero-particles::before {
    top: 18%;
    left: 12%;
    background: rgba(59, 130, 246, 0.75);
    box-shadow:
      140px 60px rgba(34, 197, 94, 0.4),
      280px -20px rgba(129, 140, 248, 0.45);
  }

  .hero-particles::after {
    bottom: 22%;
    right: 18%;
    background: rgba(34, 197, 94, 0.6);
    box-shadow:
      -160px -40px rgba(96, 165, 250, 0.35),
      -260px 50px rgba(34, 197, 94, 0.4);
    animation-delay: 2s;
  }

  @keyframes heroSparkle {
    0%,
    100% { opacity: 0.35; transform: scale(0.9); }
    50% { opacity: 0.8; transform: scale(1.05); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-particles::before,
    .hero-particles::after {
      display: none;
    }

    .hero-background::after {
      opacity: 0.05;
    }
  }

  .cv-section {
    content-visibility: auto;
    contain-intrinsic-size: 600px;
  }

  .grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-size: var(--grid-size, 80px) var(--grid-size, 80px);
    background-image:
      linear-gradient(to right, var(--grid-color, rgba(255, 255, 255, 0.12)) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grid-color, rgba(255, 255, 255, 0.12)) 1px, transparent 1px);
    opacity: var(--grid-opacity, 0.08);
  }

  .grid-overlay--blue {
    --grid-color: rgba(59, 130, 246, 0.15);
  }

  .grid-overlay--green {
    --grid-color: rgba(34, 197, 94, 0.12);
  }

  .grid-overlay--slate {
    --grid-color: rgba(148, 163, 184, 0.15);
  }

  .grid-overlay--orange {
    --grid-color: rgba(251, 146, 60, 0.18);
  }

  .grid-overlay--dense {
    --grid-size: 60px;
  }

  .grid-overlay--loose {
    --grid-size: 100px;
  }

  .grid-overlay--faint {
    --grid-opacity: 0.05;
  }

  .grid-overlay--strong {
    --grid-opacity: 0.12;
  }
}