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

/* Custom Styles */
@layer base {
    html {
        scroll-behavior: smooth;
    }
    
    body {
        @apply antialiased;
    }
}

@layer components {
    .btn-primary {
        @apply bg-gradient-to-r from-primary to-secondary text-white font-semibold py-3 px-6 rounded-lg hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5;
    }
    
    .btn-secondary {
        @apply bg-white text-dark font-semibold py-3 px-6 rounded-lg border-2 border-gray-300 hover:border-primary hover:shadow-lg transition;
    }
    
    .card-hover {
        @apply transition-all duration-300 hover:-translate-y-2 hover:shadow-xl;
    }
    
    .gradient-text {
        @apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
    }
    
    /* Custom scrollbar */
    ::-webkit-scrollbar {
        @apply w-2;
    }
    
    ::-webkit-scrollbar-track {
        @apply bg-gray-100;
    }
    
    ::-webkit-scrollbar-thumb {
        @apply bg-gradient-to-b from-primary to-secondary rounded-full;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        @apply from-blue-600 to-purple-600;
    }
}

/* Roadmap step animation */
.roadmap-step {
    @apply border-l-4 border-primary pl-6 py-4 relative;
}

.roadmap-step::before {
    content: '';
    @apply absolute left-[-8px] top-6 w-4 h-4 bg-primary rounded-full border-4 border-white;
}

.roadmap-step.completed::before {
    @apply bg-green-500;
}

/* Loading animation */
@keyframes pulse-gradient {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.pulse-gradient {
    animation: pulse-gradient 2s ease-in-out infinite;
}

/* Floating animation for elements */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.float {
    animation: float 3s ease-in-out infinite;
}

/* Video container aspect ratio fix */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Print styles for roadmaps */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        @apply text-black bg-white;
    }
    
    a {
        @apply text-black no-underline;
    }
}

/* YouTube Button Animation */
.youtube-btn {
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.youtube-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}

.youtube-btn:active {
    transform: translateY(-1px);
}

/* Popup Animations */
@keyframes slideUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out;
}

/* Prevent body scroll when popup is open */
body.popup-open {
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    #youtubePopup .relative {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
}