/* Custom styles for Seattle Taco Creators */

:root {
    --navy-900: #0c121e;
    --navy-800: #1a2a44;
    --navy-700: #223859;
    --navy-600: #2d4a73;
    --navy-500: #3d6392;
    --gold-500: #d4900a;
    --gold-400: #e8a820;
    --gold-300: #edc04d;
    --gold-200: #f3d98a;
    --gold-100: #f9edc4;
    --gold-50: #fdf9ef;
}

/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--navy-800);
    background-color: var(--gold-50);
    line-height: 1.6;
}

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

/* Typography */
h1, h2, h3, h4 {
    font-family: 'DM Serif Display', Georgia, serif;
    line-height: 1.2;
}

/* Button styles */
.btn-gold {
    background: linear-gradient(135deg, #e8a820, #d4900a);
    color: #0c121e;
    transition: all 0.3s ease;
}

.btn-gold:hover {
    background: linear-gradient(135deg, #edc04d, #e8a820);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(212, 144, 10, 0.3);
}

.btn-navy {
    background: linear-gradient(135deg, #2d4a73, #1a2a44);
    color: #fdf9ef;
    transition: all 0.3s ease;
}

.btn-navy:hover {
    background: linear-gradient(135deg, #3d6392, #2d4a73);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(20, 31, 51, 0.3);
}

/* Navigation */
nav {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

nav.scrolled {
    background: rgba(253, 249, 239, 0.95) !important;
    box-shadow: 0 4px 30px rgba(20, 31, 51, 0.08);
}

/* Mobile menu */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu.open {
    transform: translateX(0);
}

/* Scroll reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Hero image animations */
.hero-img-1 {
    animation: floatSlow 6s ease-in-out infinite;
}

.hero-img-2 {
    animation: floatSlow 6s ease-in-out infinite;
    animation-delay: 3s;
}

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

/* Taco card hover */
.taco-card:hover .taco-img {
    transform: scale(1.05) rotate(2deg);
}

.taco-img {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .hero-img-1, .hero-img-2 {
        animation: none;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .font-display {
        font-size: 2rem;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
}