/* User-selected S2 option A: one white crest and one fading silver trail. */
.hero #hero-title {
  --gloss-duration: 5200ms;
  --gloss-reflection: linear-gradient(110deg,transparent 22%,rgb(118 133 157 / 0%) 29%,rgb(118 133 157 / 15%) 36%,rgb(118 133 157 / 92%) 44%,rgb(196 206 223 / 80%) 49%,#fff 54%,#fff 66%,rgb(255 255 255 / 65%) 71%,rgb(255 255 255 / 0%) 78%,transparent 81%);
}
.hero #hero-title .hero-shimmer-glyph { fill: #f4f4fb; }
.hero #hero-title .hero-shimmer-letter { white-space: pre; }
.hero #hero-title .hero-gloss {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  text-shadow: none;
}
.hero #hero-title .hero-gloss:not(.hero-gloss-en) {
  -webkit-mask: var(--gloss-mask) center / 100% 100% no-repeat;
  mask: var(--gloss-mask) center / 100% 100% no-repeat;
}
.hero #hero-title .hero-gloss-ink {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gloss-reflection) center / 100% 100% no-repeat;
  transform: translateX(-100%);
  text-shadow: none;
}
.hero #hero-title[data-shimmer-phase="playing"] .hero-gloss-ink {
  animation: hero-continuous-gloss var(--gloss-duration) linear 1;
  will-change: transform;
}
.hero-gloss-full { --gloss-mask: url("./assets/hero-slogan/hanyi-qihei-y2-55w-b-bbc7ea17bfa4.svg"); }
.hero-gloss-first { --gloss-mask: url("./assets/hero-slogan/hanyi-qihei-y2-55w-b-first-c64605eea994.svg"); }
.hero-gloss-second { --gloss-mask: url("./assets/hero-slogan/hanyi-qihei-y2-55w-b-second-ac9895d70ce3.svg"); }
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .hero #hero-title .hero-gloss-full { display: block; }
}
.hero #hero-title .hero-gloss-en-ink {
  background-image: linear-gradient(110deg,
    transparent 40.666667%, rgb(118 133 157 / 0%) 43%,
    rgb(118 133 157 / 15%) 45.333333%, rgb(118 133 157 / 92%) 48%,
    rgb(196 206 223 / 80%) 49.666667%, #fff 51.333333%, #fff 55.333333%,
    rgb(255 255 255 / 65%) 57%, rgb(255 255 255 / 0%) 59.333333%,
    transparent 60.333333%);
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 300% 100%;
  background-position: 100% 0;
  transform: none;
}
.hero #hero-title[data-shimmer-phase="playing"] .hero-gloss-en-ink {
  animation-name: hero-continuous-gloss-en;
  will-change: background-position;
}
html[lang="en"] .hero #hero-title :is(.hero-gloss-full, .hero-gloss-first, .hero-gloss-second) { display: none; }
html[lang="en"] .hero #hero-title .hero-gloss-en { display: block; }
@media (max-width: 760px) {
  .hero #hero-title .hero-shimmer-line-space { display: none; }
  .hero #hero-title .hero-gloss-full { display: none; }
  @supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
    .hero #hero-title .hero-gloss-first {
      display: block;
      inset: 0 auto auto 10%;
      width: 80%;
      aspect-ratio: 4;
    }
    .hero #hero-title .hero-gloss-second {
      display: block;
      inset: auto 0 0;
      width: 100%;
      aspect-ratio: 5;
    }
  }
}
@keyframes hero-continuous-gloss {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@keyframes hero-continuous-gloss-en {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .hero #hero-title .hero-gloss { display: none !important; }
  .hero #hero-title .hero-gloss-ink { animation: none !important; }
}