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

:root {
  --color-main: #111827; /* gray-900 */
  --color-accent: #F59E0B; /* yellow-500 */
}

/* Base Body and Typography Styles */
body {
    @apply font-montserrat bg-gray-900 text-gray-200;
}

h1, h2, h3 {
    @apply font-playfair;
}

/* Custom Hero Background Animation */
.hero-background {
    transition: transform 1s ease-out;
}

.hero-background:hover {
    transform: scale(1.03);
}

.hero-overlay {
    background: linear-gradient(to bottom, rgba(17, 24, 39, 0.75) 0%, rgba(17, 24, 39, 0.75) 100%);
}

/* Keyframe Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.animate-fade-in { animation: fadeIn 1s ease-out forwards; }
.animate-fade-in-down { animation: fadeInDown 1s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 1s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.8s ease-out forwards; }
.animate-bounce-slow { animation: bounce-slow 2s infinite; }
.animate-pulse { animation: pulse 2s infinite; }