/* Reset / Base */
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  height:100%;
  font-family:'Playfair Display', serif;
  color:#be914e;
  background:url('pattern.png') repeat center center / cover;
  overflow-x:hidden;
}

/* Black overlay */
.overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  z-index:0;
}

/* Content layout */
.content {
  position:relative;
  z-index:10;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
}

/* Logo */
.logo {
  width:250px;
  max-width:80vw;
  margin-bottom:20px;
  opacity:0;
  transform:translateY(-20px);
  animation:slideDown 0.6s ease forwards 0.5s;
}
@keyframes slideDown { from{opacity:0; transform:translateY(-20px);} to{opacity:1; transform:translateY(0);} }

/* Tagline */
.tagline {
  font-size:1.2rem;
  margin-bottom:30px;
  opacity:0;
  transform:translateX(-50px);
  animation:slideRight 1s ease forwards 0.8s;
}
@keyframes slideRight { from{opacity:0; transform:translateX(-50px);} to{opacity:1; transform:translateX(0);} }

/* Social icons */
.socials {
  display:flex;
  justify-content:center;
  gap:20px;
  margin-bottom:40px;
  opacity:1;        /* visible */
  z-index:12;       /* above overlay */
}
.socials a {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  font-size:1.8rem;
  color:#be914e;
  text-decoration:none;
}
.socials a:hover { color:#fff; }

/* Menu Buttons */
.menu-buttons {
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:350px;
  margin:0 auto;
  z-index:10;
}

/* Buttons: horizontal width fixed */
.menu-buttons .menu-btn,
.menu-buttons a {
  display:block;
  width:80vw;         /* responsive width */
  max-width:300px;
  min-width:220px;
  padding:12px 0;     /* vertical padding */
  margin:0 auto;
  text-align:center;
  border:2px solid #be914e;
  border-radius:30px;
  background:transparent;
  color:#be914e;
  font-size:1.15rem;
  line-height:1.2;
  cursor:pointer;
  -webkit-appearance:none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.35s ease;  /* smooth hover */
}

/* Hover/focus */
.menu-buttons .menu-btn:hover,
.menu-buttons .menu-btn:focus { background:#be914e; color:#000; outline:none; }

/* Menu overlay */
.menu-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.95);
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow-y:auto;
  padding:15px;
  z-index:1000;
  opacity:0;
  transition: opacity 0.4s ease;
}

/* Fade-in/out classes for smooth animation */
.menu-overlay.fade-in { opacity:1; }
.menu-overlay.fade-out { opacity:0; }

/* Close button */
.close-btn {
  position:absolute;
  top:15px;
  right:15px;
  font-size:2rem;
  color:#be914e;
  cursor:pointer;
  z-index:1001;
  background:none;
  border:none;
}
.close-btn:hover { color:#fff; }

/* Menu pages */
.menu-page { max-width:100%; margin:10px 0; border-radius:8px; }

/* Button Animations */
.menu-buttons .menu-btn:nth-child(1){ animation:slideUp 1.5s ease forwards 0.5s; }
.menu-buttons .menu-btn:nth-child(2){ animation:slideUp 1.5s ease forwards 0.7s; }
.menu-buttons .menu-btn:nth-child(3){ animation:slideUp 1.5s ease forwards 0.9s; }
.menu-buttons .menu-btn:nth-child(4){ animation:slideUp 0.5s ease forwards 1.1s; }
.menu-buttons a:nth-child(5){ animation:slideUp 1.5s ease forwards 1.3s; }
@keyframes slideUp { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }

/* Responsive */
@media(max-width:480px){
  .menu-buttons .menu-btn, .menu-buttons a{ font-size:1.05rem; padding:10px 0; width:80vw; }
  .logo{ width:200px; }
  .tagline{ font-size:1rem; }
}