@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500&display=swap');:root{--color-terra:#7D2E68;--color-gold:#D4AF37;--color-charcoal:#2D2D2D;--color-cream:#FDFBF7}.font-serif{font-family:'Cormorant Garamond',serif}body{font-family:'Inter',sans-serif}html{scroll-behavior:smooth}.fade-in{animation:fadeIn .5s ease-in}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.form-input{@apply border-gray-300 focus:border-terra focus:ring-terra rounded-md shadow-sm}.btn-primary{@apply bg-terra text-white px-6 py-2 rounded-md hover:bg-terra/90 transition-colors}.btn-secondary{@apply border-2 border-terra text-terra px-6 py-2 rounded-md hover:bg-terra/10 transition-colors}#mobile-portfolio{transition:opacity .2s ease-in-out}#mobile-portfolio.hidden{display:none;opacity:0}#mobile-portfolio:not(.hidden){display:block;opacity:1}

/* Header skeleton placeholder */
#header {
    min-height: 64px; /* Reserve space for header (h-16 = 64px) */
}

/* Hide skeleton when real header is loaded */
#header.loaded .header-skeleton {
    display: none;
}

/* Smooth transition when header loads */
#header.loaded {
    transition: opacity 0.2s ease-in-out;
}

/* Line clamp utility for text truncation */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Cocktail card hover effects */
.cocktail-card {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cocktail-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: 1;
}

.cocktail-card:hover::before {
    transform: translateX(100%);
}

.cocktail-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cocktail-card img {
    transition: transform 0.3s ease;
    transform: scale(1) !important;
}

/* Only scale images on hover for desktop/larger screens */
@media (hover: hover) and (pointer: fine) {
    .cocktail-card:hover img {
        transform: scale(1.05) !important;
    }
}

/* Staggered animation for cocktail cards */
.cocktail-card {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}

.cocktail-card:nth-child(1) { animation-delay: 0.1s; }
.cocktail-card:nth-child(2) { animation-delay: 0.2s; }
.cocktail-card:nth-child(3) { animation-delay: 0.3s; }
.cocktail-card:nth-child(4) { animation-delay: 0.4s; }
.cocktail-card:nth-child(5) { animation-delay: 0.5s; }
.cocktail-card:nth-child(6) { animation-delay: 0.6s; }
.cocktail-card:nth-child(7) { animation-delay: 0.7s; }
.cocktail-card:nth-child(8) { animation-delay: 0.8s; }

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

/* Smooth scrolling for better doomscrolling experience */
html {
    scroll-behavior: smooth;
}

/* Enhanced grid layout for better visual flow */
.auto-rows-max {
    grid-auto-rows: max-content;
}

/* Responsive image handling */
.cocktail-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Cocktail card expansion animations */
.cocktail-expanded-content {
    transition: max-height 0.3s ease-out;
    overflow: hidden;
}

.cocktail-expanded-content.hidden {
    max-height: 0;
}

/* Smooth card expansion */
.cocktail-card {
    transition: all 0.3s ease;
}

.cocktail-card.expanded {
    transform: scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Ensure sticky header stays at top */
#header nav {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Prevent footer loading flicker */
#footer {
    min-height: 200px; /* Reserve approximate space for footer */
}

/* Ingredient Autocomplete Styles */
.ingredient-autocomplete-container {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: white;
    z-index: 1000;
}

.ingredient-autocomplete-item {
    transition: background-color 0.15s ease-in-out;
}

.ingredient-autocomplete-item:hover {
    background-color: #f3f4f6;
}

.ingredient-autocomplete-item.bg-blue-100 {
    background-color: #dbeafe !important;
}

.ingredient-autocomplete-item mark {
    background-color: #fef08a;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

/* Ensure autocomplete container doesn't overflow */
@media (max-width: 640px) {
    .ingredient-autocomplete-container {
        max-width: calc(100vw - 2rem);
        left: 0 !important;
        right: 0 !important;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}