/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; }
button { background: none; border: none; cursor: pointer; }

/* ── Nav ── */
#main-nav { background: transparent; }
#main-nav.scrolled {
  background: rgba(254, 253, 248, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(5, 150, 105, 0.1);
}
#main-nav.scrolled a,
#main-nav.scrolled button { color: #047857; }

/* ── Hero ── */
.hero-gradient {
  background: linear-gradient(135deg, #047857 0%, #059669 30%, #0d9488 60%, #14b8a6 100%);
}
.hero-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
  pointer-events: none;
}
.hero-shape-1 {
  width: 600px; height: 600px;
  background: #fde68a;
  top: -200px; right: -150px;
  animation: float 8s ease-in-out infinite;
}
.hero-shape-2 {
  width: 300px; height: 300px;
  background: #fca5a5;
  bottom: 10%; left: -80px;
  animation: float 6s ease-in-out infinite reverse;
}
.hero-shape-3 {
  width: 120px; height: 120px;
  background: #fff;
  top: 30%; left: 15%;
  animation: float 5s ease-in-out infinite;
}
.hero-shape-4 {
  width: 200px; height: 200px;
  background: #fbbf24;
  bottom: 15%; right: 10%;
  animation: float 7s ease-in-out infinite reverse;
}
.hero-shape-5 {
  width: 80px; height: 80px;
  background: #fde68a;
  top: 20%; right: 25%;
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-24px) rotate(3deg); }
}

/* ── Reveal (progressive enhancement — hidden by default, shown via JS) ── */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Mobile Menu ── */
#mobile-menu.open .#bar1 { transform: rotate(45deg) translate(4px, 4px); }
#mobile-menu.open .#bar2 { opacity: 0; }
#mobile-menu.open .#bar3 { transform: rotate(-45deg) translate(4px, -4px); width: 1.5rem; }

/* ── Decorative blobs ── */
.about-blob-1, .about-blob-2,
.menu-shape-1, .menu-shape-2,
.gallery-shape,
.visit-shape-1, .visit-shape-2,
.cta-shape-1, .cta-shape-2 {
  pointer-events: none;
}

/* ── Utility ── */
.no-underline { text-decoration: none; }