/* QuechoaTV Custom Styles Enhancement */

/* Additional Tailwind Utilities */
.bg-neutral-950 {
    background-color: #0a0a0a;
}

.bg-neutral-900 {
    background-color: #171717;
}

.bg-neutral-800 {
    background-color: #262626;
}

.bg-neutral-700 {
    background-color: #404040;
}

.text-green-400 {
    color: #83ff65;
}

.border-neutral-800 {
    border-color: #262626;
}

/* Custom Animations */
@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-slide-in-top {
    animation: slideInFromTop 0.6s ease-out;
}

.animate-slide-in-left {
    animation: slideInFromLeft 0.6s ease-out;
}

.animate-slide-in-right {
    animation: slideInFromRight 0.6s ease-out;
}

/* Sports card hover effects */
.sports-card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.sports-card-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(131, 255, 101, 0.2), transparent);
    transition: left 0.5s;
}

.sports-card-hover:hover::before {
    left: 100%;
}

.sports-card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(131, 255, 101, 0.1);
}

/* Button glow effect */
.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
}

.btn-glow:hover::before {
    left: 100%;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .text-responsive {
        font-size: clamp(1rem, 4vw, 1.25rem);
    }

    .heading-responsive {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .hero-heading-responsive {
        font-size: clamp(2rem, 8vw, 3rem);
    }
}