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

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

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Utility Classes */
.animate-fadeInUp {
    animation: fadeInUp 1s ease-out 0.3s backwards;
}

.animate-slideInDown {
    animation: slideInDown 0.6s ease-out;
}

.animate-pulse-glow {
    animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Gradient Text */
.gradient-text {
    @apply text-transparent bg-clip-text;
}

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

/* Line Clamp Support */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Styling */
.card-hover {
    @apply transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl;
}

/* Button Styles */
.btn-primary {
    @apply px-8 py-4 bg-gradient-to-r from-amber-600 to-orange-600 text-white font-bold rounded-lg hover:shadow-2xl transform hover:scale-105 transition-all duration-300;
}

.btn-secondary {
    @apply px-8 py-4 border-2 border-amber-600 text-amber-600 font-bold rounded-lg hover:bg-amber-50 transition-all duration-300;
}

/* Section Dividers */
.section-divider {
    @apply w-24 h-1 bg-gradient-to-r from-amber-500 to-orange-600;
}

/* Text Shadows */
.text-shadow-md {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.text-shadow-lg {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

/* Backdrop Effects */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

/* Smooth Transitions */
.transition-smooth {
    @apply transition-all duration-300 ease-out;
}

/* Hero Section Styling */
.hero-overlay {
    @apply absolute inset-0 bg-gradient-to-br from-black/60 via-amber-900/40 to-black/60;
}

/* Custom Shadows */
.shadow-glow {
    box-shadow: 0 0 30px rgba(217, 119, 6, 0.3);
}

/* Responsive Typography */
@media (max-width: 640px) {
    .text-responsive-lg {
        @apply text-2xl;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .text-responsive-lg {
        @apply text-4xl;
    }
}

@media (min-width: 1025px) {
    .text-responsive-lg {
        @apply text-6xl;
    }
}