html {
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

/* Animations */
@keyframes navbar-bg {
  0% {
    background-color: transparent;
    backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
  }
  100% {
    background-color: rgba(2, 6, 23, 0.8);
    backdrop-filter: blur(12px);
    border-color: rgb(30 41 59);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    border: 1px solid rgb(30 41 59);
  }
}

@keyframes navbar-height {
  from {
    height: 6rem;
  }
  to {
    height: 4rem;
  }
}

@keyframes navbar-logo {
  from {
    height: 3rem;
  }
  to {
    height: 2rem;
  }
}

@keyframes navbar-text {
  from {
    font-size: 2.75rem;
  }
  to {
    font-size: 1.5rem;
  }
}

@keyframes navbar-link {
  from {
    font-size: 1.125rem;
  }
  to {
    font-size: 1rem;
  }
}

@keyframes navbar-button {
  from {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
  }
  to {
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
}

/* Scroll-driven animations */
@supports (animation-timeline: scroll()) {
  nav {
    animation: navbar-bg linear both;
    animation-timeline: scroll();
    animation-range: 0 100px;
  }

  .nav-content {
    animation: navbar-height linear both;
    animation-timeline: scroll();
    animation-range: 0 100px;
  }

  .nav-logo {
    animation: navbar-logo linear both;
    animation-timeline: scroll();
    animation-range: 0 100px;
  }

  .nav-title {
    animation: navbar-text linear both;
    animation-timeline: scroll();
    animation-range: 0 100px;
  }

  .nav-link {
    animation: navbar-link linear both;
    animation-timeline: scroll();
    animation-range: 0 100px;
  }

  .nav-button {
    animation: navbar-button linear both;
    animation-timeline: scroll();
    animation-range: 0 100px;
  }
}

/* Fallback for browsers that don't support scroll-driven animations */
@supports not (animation-timeline: scroll()) {
  nav {
    transition: all 0.3s ease;
  }

  nav.scrolled {
    background-color: rgba(2, 6, 23, 0.8);
    backdrop-filter: blur(12px);
    border-color: rgb(30 41 59);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  nav.scrolled .nav-content {
    height: 4rem;
  }

  nav.scrolled .nav-logo {
    height: 2rem;
  }

  nav.scrolled .nav-title {
    font-size: 1.25rem;
  }

  nav.scrolled .nav-link {
    font-size: 1rem;
  }

  nav.scrolled .nav-button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
}