.river-hero h1[data-split-text] {
  overflow: visible;
  font-family: "Noto Serif SC", serif;
  font-weight: 400;
  white-space: pre-line;
}

.river-hero h1[data-split-text].split-text-active {
  white-space: pre;
}

.river-hero h1 .split-text-char {
  display: inline-block;
  margin: 0;
  color: inherit !important;
  font: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  white-space: pre;
  opacity: 0;
  transform: translate3d(0, .48em, 0) rotate(.8deg);
  filter: blur(4px);
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
  transition:
    opacity .5s cubic-bezier(.22, 1, .36, 1),
    transform .62s cubic-bezier(.22, 1, .36, 1),
    filter .5s ease;
  transition-delay: calc(var(--char-index) * 24ms + 80ms);
}

.river-hero h1.split-text-ready .split-text-char {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0);
  filter: blur(0);
}

@media (min-width: 1100px) {
  .river-hero h1[data-split-text].split-text-active {
    white-space: pre-line;
  }
}

@media (max-width: 1099px) {
  .river-hero h1[data-split-text].split-text-active {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .river-hero h1 .split-text-char {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

.nav--minimal .logo {
  color: #163b79;
  background-image: linear-gradient(100deg, #17366f 0%, #246ed0 30%, #78a9e7 48%, #245fb8 67%, #17366f 100%);
  background-size: 240% 100%;
  background-position: 0 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: logo-blue-current 6.8s ease-in-out infinite;
}

.nav--minimal .logo span {
  color: #245cae;
  border-color: rgba(36, 92, 174, .42);
  background: linear-gradient(120deg, #17366f, #4f8bd8 52%, #1e54a1);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: logo-blue-current 6.8s ease-in-out infinite reverse;
}

.nav--minimal .logo i {
  -webkit-text-fill-color: rgba(36, 92, 174, .42);
}

@keyframes logo-blue-current {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .nav--minimal .logo,
  .nav--minimal .logo span {
    animation: none;
    background-position: 45% 50%;
  }
}