html {
  scroll-padding-top: 96px;
}

.site-header {
  position: fixed;
  background: linear-gradient(180deg, rgba(20, 34, 41, 0.42), rgba(20, 34, 41, 0));
  border-bottom: 1px solid transparent;
  transition:
    padding 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease;
}

.site-header .logo img {
  transition: width 0.35s ease, opacity 0.35s ease;
}

.site-header.is-scrolled {
  padding-top: 14px;
  padding-bottom: 14px;
  background: rgba(38, 52, 59, 0.9);
  border-bottom-color: rgba(216, 189, 147, 0.24);
  box-shadow: 0 14px 38px rgba(16, 29, 35, 0.18);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.site-header.is-scrolled .logo img {
  width: 160px;
}

.site-header.is-scrolled .nav a + a {
  border-left-color: rgba(255, 255, 255, 0.26);
}

.collective::after {
  content: "Every Journey is a New Beginning";
}

main > section.premium-section {
  opacity: 0.84;
  transform: translateY(16px);
  filter: blur(1.2px) saturate(0.95);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

main > section.premium-section.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0) saturate(1);
}

@media (max-width: 820px) {
  html {
    scroll-padding-top: 74px;
  }

  .site-header {
    position: fixed;
    padding: 18px 7%;
  }

  .site-header.is-scrolled {
    padding: 12px 7%;
  }

  .site-header.is-scrolled .logo img {
    width: 145px;
  }

  main > section.premium-section {
    transform: translateY(12px);
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .logo img,
  main > section.premium-section {
    transition: none !important;
  }

  main > section.premium-section {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}