/* Premium Kodi Track Styles - Maroon Red & Blue Theme */

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

/* Custom CSS Variables */
:root {
    --primary-red: #991b1b;
    --primary-blue: #1e40af;
    --light-red: #fef2f2;
    --light-blue: #eff6ff;
    --dark-red: #7f1d1d;
    --dark-blue: #1e3a8a;
}

/* Premium Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(153, 27, 27, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(153, 27, 27, 0.6);
    }
}

@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Premium Animation Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.animate-slide-in-left {
    animation: slideInLeft 0.8s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.8s ease-out;
}

.animate-blob {
    animation: blob 7s infinite;
}

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

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

.animate-gradient {
    background-size: 400% 400%;
    animation: gradient-shift 3s ease infinite;
}

/* Animation Delays */
.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* Premium Gradient Backgrounds */
.bg-gradient-premium {
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-blue) 100%);
}

.bg-gradient-hero {
    background: linear-gradient(135deg, var(--light-red) 0%, #ffffff 50%, var(--light-blue) 100%);
}

.bg-gradient-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}

/* Glass Morphism Effects */
.glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.glass-dark {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Custom button styles */
.btn-primary {
    @apply bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition duration-200 transform hover:scale-105 shadow-lg;
}

.btn-secondary {
    @apply border-2 border-green-600 text-green-600 hover:bg-green-50 px-6 py-3 rounded-lg font-medium transition duration-200;
}

/* Custom card styles */
.feature-card {
    @apply bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition duration-300 transform hover:-translate-y-1;
}

.testimonial-card {
    @apply bg-white rounded-xl shadow-lg p-8 border-l-4 border-green-500;
}

/* Navigation styles */
.nav-link {
    @apply text-gray-700 hover:text-green-600 px-3 py-2 text-sm font-medium transition duration-200;
}

.nav-link.active {
    @apply text-green-600 border-b-2 border-green-600;
}

/* Hero section styles */
.hero-title {
    @apply text-4xl md:text-5xl lg:text-6xl font-extrabold text-gray-900 leading-tight;
}

.hero-subtitle {
    @apply text-lg md:text-xl text-gray-600 mt-4 max-w-2xl;
}

/* Feature icon styles */
.feature-icon {
    @apply flex items-center justify-center h-16 w-16 rounded-xl text-white text-2xl mx-auto mb-6 shadow-lg;
}

/* Pricing card styles */
.pricing-card {
    @apply bg-white rounded-xl shadow-lg p-8 relative;
}

.pricing-card.featured {
    @apply border-2 border-green-500 transform scale-105;
}

.pricing-badge {
    @apply absolute -top-4 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-full text-sm font-medium;
}

/* Stats and numbers */
.stat-number {
    @apply text-4xl font-bold text-green-600;
}

.stat-label {
    @apply text-gray-600 text-sm uppercase tracking-wide;
}

/* Custom responsive utilities */
@media (max-width: 640px) {
    .hero-title {
        @apply text-3xl;
    }
    
    .feature-icon {
        @apply h-12 w-12 text-xl;
    }
}

/* Loading states */
.loading {
    @apply opacity-50 pointer-events-none;
}

.loading::after {
    content: '';
    @apply absolute inset-0 bg-white bg-opacity-50;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Cpath d='M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z' fill='%23059669'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Form styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition duration-200;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-error {
    @apply text-red-600 text-sm mt-1;
}

.form-success {
    @apply text-green-600 text-sm mt-1;
}

/* Mobile menu styles */
.mobile-menu {
    @apply transition-all duration-300 ease-in-out;
}

.mobile-menu.hidden {
    @apply opacity-0 max-h-0 overflow-hidden;
}

.mobile-menu:not(.hidden) {
    @apply opacity-100 max-h-96;
}

/* Scroll animations */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.scroll-animate.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Kenya flag colors accent */
.kenya-accent {
    background: linear-gradient(90deg, #000000 33%, #ff0000 33%, #ff0000 66%, #00ff00 66%);
    height: 4px;
    width: 100%;
}

/* Custom shadows */
.shadow-kenya {
    box-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.1), 0 10px 10px -5px rgba(5, 150, 105, 0.04);
}

/* Hover effects */
.hover-lift {
    @apply transition duration-300 transform hover:-translate-y-2 hover:shadow-xl;
}

.hover-glow {
    @apply transition duration-300;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(5, 150, 105, 0.3);
}

/* Text gradients */
.text-gradient {
    background: linear-gradient(135deg, #059669, #0891b2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #059669;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #047857;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}