html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
}

main section[id] {
  scroll-margin-top: 6.5rem;
}

@media (min-width: 640px) {
  html {
    scroll-padding-top: 7.5rem;
  }

  main section[id] {
    scroll-margin-top: 7.5rem;
  }
}

/* Hero atmosphere */
.hero-surface {
  background-image:
    linear-gradient(105deg, rgba(13, 27, 61, 0.88) 0%, rgba(13, 27, 61, 0.55) 48%, rgba(13, 27, 61, 0.25) 100%),
    linear-gradient(180deg, rgba(0, 183, 179, 0.18), transparent 55%),
    url("/images/hero-image.png");
  background-size: cover;
  background-position: center;
}

.hero-title {
  text-shadow:
    0 0 12px rgba(0, 183, 179, 0.55),
    0 0 28px rgba(0, 183, 179, 0.35),
    0 2px 8px rgba(13, 27, 61, 0.45);
}

/* Subtle entrance */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-rise {
  animation: rise-in 0.7s ease-out both;
}

.animate-rise-delay {
  animation: rise-in 0.7s ease-out 0.15s both;
}

.animate-rise-delay-2 {
  animation: rise-in 0.7s ease-out 0.3s both;
}

/* Mobile nav drawer */
#mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

#mobile-nav.open {
  max-height: 28rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .animate-rise,
  .animate-rise-delay,
  .animate-rise-delay-2 {
    animation: none;
  }

  #mobile-nav {
    transition: none;
  }
}