/* Base resets and custom properties */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; }
img, video { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A1628; }
::-webkit-scrollbar-thumb { background: #1C3A5E; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #D4A017; }

/* Selection */
::selection { background: #D4A017; color: #0A1628; }

/* Focus visible */
:focus-visible { outline: 2px solid #D4A017; outline-offset: 2px; }

/* Mobile menu transitions */
#mobile-menu { transition: opacity 0.3s ease, pointer-events 0.3s ease; }
#mobile-menu.open { opacity: 1; pointer-events: all; }
#mobile-menu.closed { opacity: 0; pointer-events: none; }

/* Nav scroll state */
#site-header.scrolled {
  background: rgba(10, 22, 40, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(212, 160, 23, 0.1);
}

/* Hero text reveal (no JS required — progressive enhancement) */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible { 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; }
}

/* Default state: always visible */
.reveal { opacity: 1; transform: none; }

/* Button hover glow */
a.bg-gold-500:hover { box-shadow: 0 0 30px rgba(212, 160, 23, 0.3); }

/* Smooth image loading */
img { transition: opacity 0.3s ease; }
img[loading="lazy"] { opacity: 0; }
img.loaded { opacity: 1; }

/* Mobile link hover */
.mobile-link { transition: color 0.2s ease; }

/* Map container */
iframe { display: block; }
</style>