/* Crisp white copy beneath a continuous Rhycon Blue sweep. */
.hero .subtitle {
  --shimmer-opacity: .6;
  color: #fff;
  text-shadow: none;
  transition: color 320ms cubic-bezier(.4, 0, .2, 1);
}

/* Follow the existing scroll contrast detection as the ocean fades to white. */
.hero .subtitle.over-light {
  --shimmer-opacity: 1;
  color: var(--rhycon-blue-navy);
}

.shimmer-word {
  position: relative;
  display: inline-block;
}

.shimmer-ink {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: var(--rhycon-blue-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: none;
  /* Feather the travelling light so there is no hard wipe edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
}

.shimmer-word.is-shimmering .shimmer-ink {
  animation: rhycon-word-sweep var(--shimmer-duration, 760ms) linear both;
}

/* Emphasize the blue end of the brand gradient against navy letterforms. */
.hero .subtitle.over-light .shimmer-ink {
  background-size: 180% 100%;
  background-position: right center;
}

@keyframes rhycon-word-sweep {
  /* Preserve white beneath the sweep on water; use saturated blue on light. */
  0% { opacity: var(--shimmer-opacity); -webkit-mask-position: 150% 0; mask-position: 150% 0; }
  100% { opacity: var(--shimmer-opacity); -webkit-mask-position: -50% 0; mask-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .subtitle { transition: none; }
  .shimmer-word.is-shimmering .shimmer-ink { animation: none; }
}