/* Custom Styles for 7k7k Cinema */

:root {
    --brand-accent: #38bdf8;
}

@layer base {
    html {
        scroll-behavior: smooth;
    }
}

@layer components {
    .btn-primary {
        @apply bg-sky-400 hover:bg-sky-400/90 text-slate-950 font-bold py-2 px-6 rounded-full transition-all duration-300 transform hover:scale-105 active:scale-95;
    }
    .glass-card {
        @apply bg-slate-900/50 backdrop-blur-md border border-white/10 rounded-2xl;
    }
    .section-title {
        @apply text-3xl md:text-4xl font-bold mb-8 relative inline-block;
    }
    .section-title::after {
        content: '';
        @apply absolute -bottom-2 left-0 w-1/2 h-1 bg-sky-400 rounded-full;
    }
}

/* Animations */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s ease-out forwards;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    @apply bg-slate-900;
}
::-webkit-scrollbar-thumb {
    @apply bg-slate-700 rounded-full hover:bg-slate-600;
}

/* Page Transitions */
.page-section {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.page-section.hidden {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}

.page-section:not(.hidden) {
    display: block;
    opacity: 1;
    transform: translateY(0);
}