/* Skylink's centered hero uses the reference's one-pass warm sweep motion. */
@property --skylink-sweep {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 114%;
}

.hero-new .hero-content {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.hero-new .hero-ready { max-width: none; margin-inline: auto; letter-spacing: -.04em; }
.hero-new .hero-positioning,
.hero-new .hero-description { margin-inline: auto; }
.hero-new .hero-actions { justify-content: center; }

.skylink-sweep {
  position: relative;
  display: inline-grid;
  white-space: nowrap;
  font-weight: 600;
}
.skylink-sweep-size {
  grid-area: 1 / 1;
  visibility: hidden;
  padding-bottom: .12em;
}
.skylink-sweep-word {
  grid-area: 1 / 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding-bottom: .12em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  --skylink-sweep: 114%;
  background-image: linear-gradient(90deg,
    #111214 0%, #111214 calc(var(--skylink-sweep) - 14%),
    #ffd9a8 calc(var(--skylink-sweep) - 14%),
    #ffb763 calc(var(--skylink-sweep) - 7%),
    #ff8f1f var(--skylink-sweep),
    #e2660c calc(var(--skylink-sweep) + 7%),
    #b8480a calc(var(--skylink-sweep) + 14%),
    transparent calc(var(--skylink-sweep) + 14%), transparent 100%);
}
.skylink-sweep-word.enter {
  --skylink-sweep: 0%;
  opacity: .56;
  transform: translateY(5px);
  transition: none;
}
.skylink-sweep-word.sweep {
  --skylink-sweep: 114%;
  opacity: 1;
  transform: translateY(0);
  transition: --skylink-sweep 1.2s cubic-bezier(.23,1,.32,1),
              opacity .3s cubic-bezier(.23,1,.32,1),
              transform .5s cubic-bezier(.22,1,.36,1);
}
.skylink-sweep-word.sweep.leave {
  opacity: 0;
  transition: opacity .14s cubic-bezier(.22,1,.36,1);
}

@media (max-width: 420px) {
  .hero-ready .skylink-sweep { font-size: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  .skylink-sweep-word,
  .skylink-sweep-word.enter,
  .skylink-sweep-word.sweep {
    --skylink-sweep: 114%;
    opacity: 1;
    transform: none;
    transition: none;
  }
}