@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;

    --card: 0 0% 7%;
    --card-foreground: 0 0% 100%;

    --popover: 0 0% 7%;
    --popover-foreground: 0 0% 100%;

    --primary: 359 70% 57%;
    --primary-foreground: 0 0% 100%;

    --secondary: 0 0% 100%;
    --secondary-foreground: 0 0% 0%;

    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 70%;

    --accent: 0 0% 15%;
    --accent-foreground: 0 0% 100%;

    --destructive: 359 70% 57%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 15%;
    --input: 0 0% 15%;
    --ring: 359 70% 57%;

    --radius: 0.5rem;
  }

  * {
    @apply border-border;
  }

  html {
    @apply scroll-smooth;
  }

  body {
    @apply bg-[#000000] text-white font-sans overflow-x-hidden;
    font-family: 'Montserrat', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold;
  }

  .text-shadow {
    text-shadow: 0 0 5px rgba(234, 56, 76, 0.7);
  }

  .text-shadow-strong {
    text-shadow: 0 0 10px rgba(234, 56, 76, 0.8), 0 0 20px rgba(234, 56, 76, 0.4);
  }

  .text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  .red-glow {
    filter: drop-shadow(0 0 8px rgba(234, 56, 76, 0.8));
  }

  .white-glow {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
  }

  .pulse-glow {
    animation: pulse-glow 2s infinite;
  }

  .glass {
    @apply backdrop-blur-lg bg-white/[0.03] border border-white/10;
  }

  .glass-dark {
    @apply backdrop-blur-lg bg-black/50 border border-white/10;
  }

  .reveal-text > span {
    @apply opacity-0;
    animation: text-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(0.1s * var(--index));
    transform: translateY(1.2em);
    display: inline-block;
  }

  .noise-bg {
    position: relative;
  }
  
  .noise-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.035;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  }

  .vertical-timeline-element-content {
    @apply glass !shadow-none;
  }

  .tv-static {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    animation: static 0.5s infinite;
  }

  @keyframes static {
    0% { opacity: 0.9; }
    50% { opacity: 0.7; }
    100% { opacity: 0.9; }
  }

  @keyframes pulse-glow {
    0% {
      box-shadow: 0 0 0 0 rgba(234, 56, 76, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(234, 56, 76, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(234, 56, 76, 0);
    }
  }
}

@layer components {
  .container-custom {
    @apply w-full max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8;
  }

  .section-padding {
    @apply py-20 sm:py-24 lg:py-28;
  }

  .btn-primary {
    @apply relative flex items-center justify-center px-6 py-3 overflow-hidden font-bold text-white rounded-md bg-[#ea384c] 
    hover:bg-opacity-90 transition-all duration-300 focus:outline-none transform hover:scale-[1.02] active:scale-[0.98];
  }

  .btn-secondary {
    @apply relative flex items-center justify-center px-6 py-3 overflow-hidden font-bold text-white rounded-md bg-[#ea384c]/80
    hover:bg-opacity-90 transition-all duration-300 focus:outline-none transform hover:scale-[1.02] active:scale-[0.98];
  }

  .btn-outline {
    @apply relative flex items-center justify-center px-6 py-3 overflow-hidden font-bold text-white border-2 rounded-md border-white/20
    hover:border-white/40 transition-all duration-300 focus:outline-none transform hover:scale-[1.02] active:scale-[0.98];
  }
  
  /* New section divider styles */
  .section-divider {
    @apply relative w-full h-16 overflow-hidden;
  }
  
  .section-divider::before {
    content: "";
    @apply absolute inset-0 bg-gradient-to-r from-[#ea384c]/5 via-[#ea384c]/20 to-[#ea384c]/5 transform skew-y-1;
  }
  
  .section-divider::after {
    content: "";
    @apply absolute top-1/2 left-1/2 -translate-x-1/2 w-40 h-[1px] bg-[#ea384c]/40;
  }
}