@tailwind components;

@layer components {
    body {
        font-family: 'Space Grotesk', sans-serif;
        min-height: max(884px, 100dvh);
    }
  
    .glass {
      background: rgba(188, 19, 254, 0.03);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(188, 19, 254, 0.2);
    }
    
    .neon-glow-nav {
      text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
    }
    
    .neon-border-purple-pink {
      border: 2px solid;
      border-image-source: linear-gradient(45deg, #bc13fe, #ff00e5);
      border-image-slice: 1;
    }
    
    .headline-glow {
      background: linear-gradient(to right, #bc13fe, #00d4ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 15px rgba(188, 19, 254, 0.4));
    }
    
    .whatsapp-glow {
      box-shadow: 0 0 20px rgba(255, 0, 229, 0.3), 0 0 40px rgba(0, 212, 255, 0.2);
    }
    
    .bg-cyber-gradient {
      position: relative;
      background-color: #050505;
    }

    .bg-cyber-gradient::before {
      content: '';
      position: fixed;
      top: -5%;
      left: -5%;
      width: 110%;
      height: 110%;
      background-image: radial-gradient(circle at 20% 30%, rgba(188, 19, 254, 0.3) 0%, transparent 50%),
                        radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.3) 0%, transparent 50%),
                        url('assets/psylantro_bg.png');
      background-size: cover;
      background-position: center;
      background-blend-mode: overlay;
      filter: blur(10px) brightness(0.4);
      z-index: 0;
      pointer-events: none;
      animation: bgDrift 40s ease-in-out infinite alternate;
    }

    .bg-cyber-gradient > header,
    .bg-cyber-gradient > main,
    .bg-cyber-gradient > footer {
      position: relative;
      z-index: 10;
    }

    @keyframes bgDrift {
      0% {
          transform: scale(1) translate(0, 0);
      }
      50% {
          transform: scale(1.05) translate(-1%, 1%);
      }
      100% {
          transform: scale(1.1) translate(1%, -1%);
      }
    }

    /* Glow to match the mushrooms */
    .neon-image-glow {
        box-shadow: 0 0 30px rgba(188, 19, 254, 0.5), 0 0 60px rgba(0, 212, 255, 0.3);
        border: 2px solid rgba(188, 19, 254, 0.4);
    }
}