/* Custom styles for Cafe 7080 Lounge */

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

  /* Selection color */
  ::selection {
    background-color: rgba(232, 99, 107, 0.3);
    color: #f6f6f7;
  }

  /* Scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #11171e;
  }
  ::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #4b5059;
  }

  /* Fade-in animation */
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .fade-in {
    animation: fadeUp 0.8s ease-out forwards;
    opacity: 0;
  }

  /* Reveal on scroll */
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

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

  /* Navbar styles */
  #navbar {
    background: transparent;
  }

  #navbar.scrolled {
    background: rgba(8, 12, 16, 0.92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(55, 65, 81, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  }

  #navbar.scrolled .font-serif {
    color: #f6f6f7 !important;
  }

  /* Menu tabs */
  .menu-tab {
    color: #7a7f8a;
    background: transparent;
    cursor: pointer;
  }

  .menu-tab.active {
    color: #11171e;
    background: #E8636B;
    box-shadow: 0 4px 15px rgba(232, 99, 107, 0.3);
  }

  .menu-tab:hover:not(.active) {
    color: #e2e3e5;
    background: rgba(55, 65, 81, 0.4);
  }

  /* Menu panel transition */
  .menu-panel {
    animation: panelIn 0.4s ease-out forwards;
  }

  @keyframes panelIn {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Mobile menu */
  #mobileMenu.open {
    opacity: 1;
    pointer-events: all;
  }

  /* Hero image hover */
  .rounded-2xl.overflow-hidden {
    transition: transform 0.6s ease-out;
  }

  /* Coral accent line animation */
  .accent-line {
    position: relative;
    overflow: hidden;
  }

  .accent-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #E8636B, transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease-out;
  }

  .accent-line:hover::after {
    transform: translateX(0);
  }

  /* Floating card animation */
  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  .floating {
    animation: float 4s ease-in-out infinite;
  }

  /* Pulse for CTA */
  @keyframes pulse-coral {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(232, 99, 107, 0.4);
    }
    50% {
      box-shadow: 0 0 0 10px rgba(232, 99, 107, 0);
    }
  }

  .cta-pulse {
    animation: pulse-coral 2s ease-in-out infinite;
  }

  /* Image aspect ratio fallbacks */
  .aspect-\[4\/5\] {
    aspect-ratio: 4 / 5;
  }

  .aspect-\[3\/4\] {
    aspect-ratio: 3 / 4;
  }

  .aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .font-serif {
      line-height: 1.15;
    }

    h1 {
      font-size: 2.75rem !important;
    }

    h2 {
      font-size: 2.25rem !important;
    }
  }

  @media (max-width: 640px) {
    h1 {
      font-size: 2.25rem !important;
    }

    h2 {
      font-size: 1.875rem !important;
    }
  }

  /* Focus visible for accessibility */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid #E8636B;
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Print styles */
  @media print {
    header, footer, #contactForm, button {
      display: none;
    }

    body {
      background: white;
      color: black;
    }

    .font-serif {
      color: black;
    }
  }