*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; }

/* NAV */
#nav { transition: background-color 0.5s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease; }
#nav.scrolled { background-color: rgba(253,251,249,0.92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(44,36,32,0.08); }
.nav-logo { transition: color 0.3s ease; }

/* MOBILE MENU */
#mobileMenu.open { opacity: 1; pointer-events: all; }
#mobileMenu.closed { opacity: 0; pointer-events: none; }
.mobile-link { transition: opacity 0.3s ease, transform 0.3s ease; }
#mobileMenu.open .mobile-link { opacity: 1; transform: translateY(0); }
#mobileMenu.closed .mobile-link { opacity: 0; transform: translateY(12px); }
#mobileMenu.open .mobile-link:nth-child(1) { transition-delay: 0.08s; }
#mobileMenu.open .mobile-link:nth-child(2) { transition-delay: 0.14s; }
#mobileMenu.open .mobile-link:nth-child(3) { transition-delay: 0.20s; }
#mobileMenu.open .mobile-link:nth-child(4) { transition-delay: 0.26s; }

/* HERO ANIMATIONS */
.hero-eyebrow { animation: fadeUp 0.8s ease 0.2s both; }
.hero-headline { animation: fadeUp 0.9s ease 0.4s both; }
.hero-sub { animation: fadeUp 0.9s ease 0.55s both; }
.hero-cta { animation: fadeUp 0.9s ease 0.7s both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollDown {
  0% { top: -12px; opacity: 0; }
  50% { opacity: 1; }
  100% { top: 40px; opacity: 0; }
}
.animate-scroll-down { animation: scrollDown 1.6s ease-in-out infinite; }

/* SCROLL REVEAL */
.reveal { opacity: 1; transform: translateY(0); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal:not(.revealed) { opacity: 0; transform: translateY(32px); transition: opacity 0.8s ease, transform 0.8s ease; }
@media (prefers-reduced-motion: no-preference) {
  .reveal:not(.revealed) { opacity: 0; transform: translateY(32px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* SCROLL INDICATOR */
.scroll-indicator { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}