@import "tailwindcss";
@import "flag-icons/css/flag-icons.min.css";

@custom-variant hover (&:hover);

@theme {
  --color-bg: #040d08;
  --color-card: #0a1810;
  --color-hero: #0d2416;
  --color-green: #22c55e;
  --color-green-light: #4ade80;
  --color-green-sec: #6abf7a;
  --color-green-muted: #2a5c35;
  --color-green-dark: #1a3a22;
  --color-green-mid: #4a7a55;
  --color-text: #dff5e8;
  --color-border: rgba(34,197,94,0.15);

  --font-display: "Bebas Neue", cursive;
  --font-body: "Space Grotesk", system-ui, sans-serif;
}

@layer base {
  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    background-color: var(--color-bg);
    /* Diagonal goal-net pattern */
    background-image:
      repeating-linear-gradient(
        -45deg,
        rgba(34,197,94,0.028) 0, rgba(34,197,94,0.028) 1px,
        transparent 1px, transparent 28px
      ),
      repeating-linear-gradient(
        45deg,
        rgba(34,197,94,0.028) 0, rgba(34,197,94,0.028) 1px,
        transparent 1px, transparent 28px
      );
    color: var(--color-text);
    font-family: "Space Grotesk", system-ui, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Glass card — semi-transparent over the body net pattern */
  .glass-card {
    background: rgba(4, 18, 8, 0.78);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .glass-card-hero {
    background: linear-gradient(145deg, rgba(13,32,22,0.82), rgba(16,42,28,0.82));
    border: 1px solid color-mix(in srgb, var(--color-green) 28%, transparent);
    border-radius: 1rem;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: #020a04; }
  ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-green) 25%, transparent); border-radius: 4px; }

  @keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(0.6); }
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-live { animation: livePulse 2s ease-in-out infinite; }
  .animate-fade-in { animation: fadeIn 0.3s ease-out; }

  .pitch-grid {
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 44px,
      rgba(34,197,94,0.018) 44px,
      rgba(34,197,94,0.018) 88px
    );
  }
}