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

/* Custom Base Styles */
body {
    /* Ensuring smooth scrolling behavior from html tag is handled in HTML */
}

/* Neon Glow Utilities */
.text-shadow-neon {
    text-shadow: 0 0 10px rgba(163, 230, 53, 0.5), 0 0 20px rgba(163, 230, 53, 0.3);
}

.box-shadow-neon {
    box-shadow: 0 0 15px rgba(163, 230, 53, 0.2);
}

/* Grid Background Animation */
.perspective-container {
    perspective: 1000px;
}

.rotate-y-12 {
    transform: rotateY(5deg) rotateX(2deg);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #bef264; /* lime-200 */
}

/* Utility Classes for JS Toggling */
.blur-effect {
    backdrop-filter: blur(10px);
}

.scan-line {
    width: 100%;
    height: 2px;
    background: rgba(190, 242, 100, 0.5);
    box-shadow: 0 0 10px rgba(190, 242, 100, 0.8);
    animation: scan 3s linear infinite;
    opacity: 0.5;
}

@keyframes scan {
    0% { transform: translateY(0); }
    100% { transform: translateY(200px); }
}

/* Glitch Effect on Hover */
.glitch-hover:hover {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: #bef264;
}

@keyframes glitch {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 2px) }
    40% { transform: translate(-2px, -2px) }
    60% { transform: translate(2px, 2px) }
    80% { transform: translate(2px, -2px) }
    100% { transform: translate(0) }
}