/* 2. Custom Global Styles & Animations */
        
        /* Floating effect for the hero image (optional) */
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0.5deg); }
            50% { transform: translateY(-15px) rotate(-0.5deg); }
        }
        .float { animation: float 4s ease-in-out infinite; }
        
        /* Hero Text Entrance Animations */
        @keyframes fade-in-down {
            0% { opacity: 0; transform: translateY(-30px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes fade-in-up {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade-in-down { animation: fade-in-down 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation-delay: 0.3s; }
        .animate-fade-in-up { animation: fade-in-up 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation-delay: 0.8s; }
        
        /* Navbar Glassmorphism Scroll Effect (Essential Fix) */
        #navbar {
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            background-color: transparent;
            padding-top: 2rem;
            padding-bottom: 2rem;
        }
        #navbar.scrolled {
            background-color: rgba(31, 41, 55, 0.9); /* Semi-transparent dark */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
        
        /* Navbar Link Hover */
        .nav-link {
          position: relative;
          color: var(--color-light);
          transition: color 0.3s ease;
        }
        .nav-link:after {
          content: '';
          position: absolute;
          width: 0;
          height: 3px;
          bottom: -8px;
          left: 50%;
          background-color: var(--color-primary);
          transition: all 0.3s ease;
          transform: translateX(-50%);
        }
        .nav-link:hover:after, .nav-link.active:after {
          width: 70%;
        }

        /* Footer Link Hover & Icon Color */
        .footer-link {
          color: #D1D5DB;
          transition: color 0.25s ease;
        }
        .footer-link:hover {
          color: var(--color-primary);
        }
        /* Icon color inside footer links */
        .footer-link i,
        .footer-link svg {
          color: #D1D5DB;
          transition: color 0.25s ease;
        }
        .footer-link:hover i,
        .footer-link:hover svg {
          color: var(--color-primary);
        }

        /* Menu Item Scroll Reveal Animation Initial State */
        .menu-item {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        /* Image hover effect for menu items (index + order pages) */
        .menu-item img,
        .menu-card img,
        #menu-list img {
          transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 320ms ease;
          will-change: transform;
          cursor: pointer;
        }

        .menu-item:hover img,
        .menu-card:hover img,
        #menu-list .p-6:hover img {
          transform: scale(1.06) translateY(-6px);
          filter: drop-shadow(0 12px 30px rgba(0,0,0,0.12));
        }

        @media (prefers-reduced-motion: reduce) {
          .menu-item img,
          .menu-card img,
          #menu-list img { transition: none !important; transform: none !important; }
        }

        /* Lightbox styles for clicked image preview */
        .lightbox {
          display: none;
          align-items: center;
          justify-content: center;
          position: fixed;
          inset: 0;
          z-index: 60;
          background-color: rgba(0,0,0,0.85);
          padding: 2rem;
        }
        .lightbox.open { display: flex; }
        .lightbox img {
          max-width: 92%;
          max-height: 92%;
          border-radius: 0.5rem;
          box-shadow: 0 24px 48px rgba(0,0,0,0.6);
          transform: scale(1);
          transition: transform 240ms cubic-bezier(.2,.8,.2,1);
        }
        .lightbox .lb-caption {
          margin-top: 0.75rem;
          color: #F3F4F6;
          text-align: center;
          max-width: 92%;
        }
        .lightbox .lb-close {
          position: absolute;
          right: 1.25rem;
          top: 1.25rem;
          background: transparent;
          color: #fff;
          font-size: 1.4rem;
          border: none;
          cursor: pointer;
        }

        @media (prefers-reduced-motion: reduce) {
          .lightbox img { transition: none !important; }
        }

        :root {
            --color-primary: #F59E0B; /* Bright Orange-Yellow */
            --color-secondary: #DC2626; /* Deep Red (Accent/Heat) */
            --color-dark: #1F2937; /* Deep Charcoal Gray */
            --color-light: #F9FAFB; /* Off-white */
        }
            /* "OMG" Bounce Animation (subtle, fun) */
            @keyframes bounce-omg {
              0%, 100% {
                transform: translateY(0) scale(1);
                animation-timing-function: cubic-bezier(.8,0,.2,1);
              }
              40% {
                transform: translateY(-22px) scale(1.02);
                animation-timing-function: cubic-bezier(.8,0,.2,1);
              }
              55% {
                transform: translateY(-10px) scale(1.01);
              }
              70% {
                transform: translateY(-4px) scale(1.005);
              }
            }

            .animate-bounce-omg {
              animation: bounce-omg 1.8s infinite;
              will-change: transform;
            }

            @media (prefers-reduced-motion: reduce) {
              .animate-bounce-omg { animation: none; }
            }