@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900&family=Oswald:wght@400;500;600;700&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-gym-black { background-color: #0a0a0a; }
    .bg-gym-dark { background-color: #171717; }
    .bg-gym-neon { background-color: #ccff00; }
    
    .text-gym-neon { color: #ccff00; }
    
    .border-gym-neon { border-color: #ccff00; }
    
    .font-oswald { font-family: 'Oswald', sans-serif; }
    .font-montserrat { font-family: 'Montserrat', sans-serif; }
    
    .btn-gym {
        @apply inline-flex items-center justify-center bg-[#ccff00] text-black font-oswald font-bold uppercase tracking-wider rounded-none py-4 px-8 hover:bg-white transition-all duration-300 relative overflow-hidden;
    }
    
    .btn-gym-outline {
        @apply inline-flex items-center justify-center border-2 border-[#ccff00] text-[#ccff00] font-oswald font-bold uppercase tracking-wider rounded-none py-4 px-8 hover:bg-[#ccff00] hover:text-black transition-all duration-300;
    }
    
    .nav-link {
        @apply text-white hover:text-[#ccff00] font-oswald font-bold uppercase tracking-widest transition-colors duration-300 relative;
    }
    
    .nav-link::after {
        content: '';
        @apply absolute -bottom-2 left-0 w-0 h-0.5 bg-[#ccff00] transition-all duration-300;
    }
    
    .nav-link:hover::after, .nav-link.active::after {
        @apply w-full;
    }
    
    .nav-link.active {
        @apply text-[#ccff00];
    }
    
    .class-card {
        @apply relative overflow-hidden group rounded-none bg-gym-dark;
    }
    
    .class-img {
        @apply w-full h-[400px] object-cover transition-transform duration-700 group-hover:scale-110 opacity-70 group-hover:opacity-100;
    }
    
    .class-content {
        @apply absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent flex flex-col justify-end p-8;
    }
}

/* Diagonal Cut Shapes */
.clip-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.clip-diagonal-reverse {
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
}