@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4EEFDC;
}

/* Background Grid Animation */
#bg-grid {
    background-size: 50px 50px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    transform: perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);
    animation: gridMove 20s linear infinite;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

@keyframes gridMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 500px;
    }
}

/* Text Gradient Animation */
.animate-gradient {
    background-size: 200% auto;
    animation: textGradient 3s linear infinite;
}

@keyframes textGradient {
    to {
        background-position: 200% center;
    }
}

/* Floating Animation for Particles */
.float-1 { animation: float 6s ease-in-out infinite; }
.float-2 { animation: float 8s ease-in-out infinite reverse; }
.float-3 { animation: float 7s ease-in-out infinite 1s; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Block Item (Particle) */
.block-item {
    position: absolute;
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    opacity: 0.3;
}

/* Glassmorphism utility */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Minecraft button click effect */
button:active {
    transform: translateY(2px);
    box-shadow: none !important;
}

/* Section transitions */
.section-header {
    opacity: 0;
    transform: translateY(30px);
}
