/* ===== Base & Typography ===== */
html {
  scroll-behavior: smooth;
}

body {
  background-color: #0a0f1f;
  color: #d9e0ef;
}

::selection {
  background-color: #B8860B;
  color: #0a0f1f;
}

/* ===== Navigation ===== */
#navbar {
  background: transparent;
}

#navbar.scrolled {
  background: rgba(10, 15, 31, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(184, 134, 11, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: #B8860B;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* ===== Mobile Menu ===== */
.menu-line {
  display: block;
}

#mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

#mobile-menu.open .mobile-link {
  animation: fadeUp 0.4s ease forwards;
}

#mobile-menu.open .mobile-link:nth-child(1) { animation-delay: 0.05s; }
#mobile-menu.open .mobile-link:nth-child(2) { animation-delay: 0.1s; }
#mobile-menu.open .mobile-link:nth-child(3) { animation-delay: 0.15s; }
#mobile-menu.open .mobile-link:nth-child(4) { animation-delay: 0.2s; }
#mobile-menu.open .mobile-link:nth-child(5) { animation-delay: 0.25s; }

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

/* ===== Hero Animations ===== */
.hero-subtitle {
  animation: slideUp 0.8s ease 0.2s both;
}

.hero-title {
  animation: slideUp 0.8s ease 0.4s both;
}

.hero-text {
  animation: slideUp 0.8s ease 0.6s both;
}

.hero-cta {
  animation: slideUp 0.8s ease 0.8s both;
}

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

/* ===== Section Labels ===== */
.menu-label,
.about-label,
.gallery-label,
.visit-label,
.contact-label {
  display: block;
}

/* ===== Menu Cards ===== */
.menu-card {
  position: relative;
  overflow: hidden;
}

.menu-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #B8860B, transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.menu-card:hover::before {
  opacity: 1;
}

.menu-card-title {
  position: relative;
}

.menu-items li {
  position: relative;
}

.menu-items li:not(:last-child) {
  padding-bottom: 4px;
}

/* ===== Gallery ===== */
.gallery-item {
  position: relative;
  overflow: hidden;
  height: 250px;
}

.gallery-item:nth-child(1),
.gallery-item:nth-child(5) {
  height: 320px;
}

.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 15, 31, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.gallery-item:hover::after {
  opacity: 1;
}

/* ===== Contact Form ===== */
.contact-input {
  border-radius: 2px;
}

.contact-input:focus {
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15);
}

.contact-btn {
  position: relative;
  overflow: hidden;
  letter-spacing: 0.2em;
}

.contact-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}

.contact-btn:hover::before {
  left: 100%;
}

/* ===== Scroll Reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .gallery-item {
    height: 200px;
  }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(5) {
    height: 250px;
  }
}

@media (min-width: 768px) {
  .gallery-item {
    height: 280px;
  }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(5) {
    height: 350px;
  }
}