/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }

/* ===== SCROLL REVEAL (progressive enhancement) ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal-scroll {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal-scroll.is-hidden {
    opacity: 0;
    transform: translateY(30px);
  }
}
/* Fallback: always visible if JS disabled or prefers-reduced-motion */
@media not all and (prefers-reduced-motion: no-preference) {
  .reveal-scroll { opacity: 1; transform: none; }
}
.reveal-scroll { opacity: 1; transform: translateY(0); }

/* ===== NAVBAR ===== */
#navbar {
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
#navbar.scrolled {
  background: rgba(253, 248, 240, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(10, 23, 68, 0.08);
}

/* ===== MOBILE MENU ===== */
.mobile-link {
  position: relative;
}
.mobile-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #4ade80;
  transition: width 0.2s ease;
}
.mobile-link:hover::after {
  width: 100%;
}

/* ===== HERO ===== */
#hero {
  position: relative;
}

/* ===== CUSTOM SELECTION ===== */
::selection {
  background: #86efac;
  color: #0a1744;
}

/* ===== SMOOTH IMAGE LOADING ===== */
img {
  background-color: #eef2ff;
}

/* ===== FOCUS STYLES ===== */
a:focus-visible, button:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== SUBTLE ANIMATIONS ===== */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* ===== CARD HOVER EFFECTS ===== */
.rounded-3xl {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

/* ===== BUTTON HOVER ===== */
a[href="#hero"], a[href="#menu"], a[href="#visit"] {
  position: relative;
}

/* ===== MAP CONTAINER ===== */
iframe {
  filter: saturate(0.8) contrast(1.05);
  transition: filter 0.3s ease;
}
iframe:hover {
  filter: saturate(1) contrast(1);
}

/* ===== MOBILE MENU ANIMATION ===== */
#mobileMenu {
  animation: slideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== DECORATIVE BLOB ANIMATION ===== */
@keyframes blobMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}
.absolute.top-10.left-10 {
  animation: blobMove 8s ease-in-out infinite;
}
.absolute.bottom-20.right-10 {
  animation: blobMove 10s ease-in-out infinite reverse;
}
.absolute.top-1/3.right-1/4 {
  animation: blobMove 6s ease-in-out infinite;
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */
@media (max-width: 640px) {
  .font-display {
    line-height: 1.15;
  }
}
