/* Banna Restaurant and Bar — Custom Styles */

/* Base reset and typography */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #111827;
    background-color: #fffbf5;
    overflow-x: hidden;
}

/* Selection color */
::selection {
    background-color: #b82a3e;
    color: #fff;
}

/* Focus styles */
*:focus-visible {
    outline: 2px solid #b82a3e;
    outline-offset: 2px;
}

/* Smooth image rendering */
img {
    -webkit-font-smoothing: antialiased;
    image-rendering: -webkit-optimize-contrast;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .marquee-track {
        animation: none;
    }
}

/* Custom Tailwind components */
.geo-shape {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Text gradient utility */
.text-gradient {
    background: linear-gradient(135deg, #b82a3e 0%, #ff4d6d 50%, #b82a3e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Noise texture overlay */
.noise-overlay {
    position: relative;
}

.noise-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Card depth */
.card-depth {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-depth:hover {
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.06),
        0 12px 28px rgba(0, 0, 0, 0.1),
        0 20px 40px rgba(184, 42, 62, 0.08);
}

/* Pill button */
.pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pill-btn-primary {
    background: linear-gradient(135deg, #b82a3e 0%, #d43b4f 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(184, 42, 62, 0.3);
}

.pill-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(184, 42, 62, 0.4);
}

.pill-btn-outline {
    background: transparent;
    color: #b82a3e;
    border: 2px solid #b82a3e;
}

.pill-btn-outline:hover {
    background: #b82a3e;
    color: #fff;
}

/* Section divider */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #fce4e8 50%, transparent 100%);
}

/* Scroll-triggered animations (progressive enhancement) */
@media (prefers-reduced-motion: no-preference) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 0;
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    .reveal-left.active {
        opacity: 1;
        transform: translateX(0);
    }

    .reveal-right.active {
        opacity: 1;
        transform: translateX(0);
    }

    .reveal-scale.active {
        opacity: 1;
        transform: scale(1);
    }
}

/* Default visible state for all reveal elements (progressive enhancement) */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 1;
    transform: none;
}

/* Tablet and up */
@media (min-width: 768px) {
    /* Enhanced hover states */
    .card-hover {
        will-change: transform;
    }
}

/* Print styles */
@media print {
    nav,
    .mobile-menu,
    .marquee-track,
    button,
    form {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .bg-burgundy-950,
    .bg-burgundy-700 {
        background: #fff !important;
        color: #000 !important;
    }
}