/* Custom Styles for Pizza Pazza */

:root {
    --burgundy: #781c24;
    --blush: #f5ebe0;
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Montserrat', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--blush);
    color: var(--burgundy);
}

.font-cormorant {
    font-family: var(--font-serif);
}

.font-montserrat {
    font-family: var(--font-sans);
}

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

::-webkit-scrollbar-track {
    background: var(--blush);
}

::-webkit-scrollbar-thumb {
    background: var(--burgundy);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a151b;
}

/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Menu Item Hover */
.menu-item {
    position: relative;
}

.menu-item::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--burgundy);
    transition: width 0.3s ease;
}

.menu-item:hover::after {
    width: 100%;
}

/* Mobile Menu Transitions */
#mobile-menu {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Image Hover Zoom */
img {
    transition: transform 0.5s ease;
}

.group:hover img {
    transform: scale(1.05);
}

/* Decorative Lines */
.deco-line {
    position: absolute;
    background-color: var(--burgundy);
    opacity: 0.3;
}

/* Loading State */
.loading {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.loaded {
    opacity: 1;
}