/* Hero 双行姓名：React Bits GlitchText 思路的 Signal Red 品牌化适配。 */
#hero-title > span.hero-glitch-text {
  position: relative;
  isolation: isolate;
}

#hero-title > span.hero-glitch-text::before,
#hero-title > span.hero-glitch-text::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  content: attr(data-text);
  /* 支持 Generated Content alternate text 的浏览器会忽略故障副本读屏。 */
  content: attr(data-text) / "";
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  transform: translate3d(0, 0, 0);
  transform-origin: left center;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke: 0 transparent;
  backface-visibility: hidden;
}

#hero-title > span.hero-glitch-text::before {
  color: var(--color-signal-red, #f40c3f);
  text-shadow:
    1px 0 0 rgba(var(--rgb-warm-ink, 255, 240, 235), 0.22),
    3px 0 14px rgba(var(--rgb-signal-red, 244, 12, 63), 0.22);
}

#hero-title > span.hero-glitch-text::after {
  color: var(--color-warm-ink, #fff0eb);
  text-shadow:
    -1px 0 0 rgba(var(--rgb-signal-red, 244, 12, 63), 0.68),
    -3px 0 12px rgba(var(--rgb-warm-ink, 255, 240, 235), 0.14);
}

#hero-title > span.hero-glitch-text--active::before {
  will-change: clip-path, opacity, transform;
  animation: y1cHeroGlitchSignal 700ms steps(1, end) both;
}

#hero-title > span.hero-glitch-text--active::after {
  will-change: clip-path, opacity, transform;
  animation: y1cHeroGlitchWarm 700ms steps(1, end) both;
}

@keyframes y1cHeroGlitchSignal {
  0%,
  100% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  7% {
    clip-path: inset(7% 0 72% 0);
    opacity: 0.74;
    transform: translate3d(-4px, 0, 0);
  }

  14% {
    clip-path: inset(58% 0 20% 0);
    opacity: 0.56;
    transform: translate3d(3px, 1px, 0);
  }

  21% {
    clip-path: inset(28% 0 54% 0);
    opacity: 0.66;
    transform: translate3d(-2px, -1px, 0);
  }

  29% {
    clip-path: inset(76% 0 8% 0);
    opacity: 0.52;
    transform: translate3d(4px, 0, 0);
  }

  38% {
    clip-path: inset(12% 0 66% 0);
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  49% {
    clip-path: inset(46% 0 35% 0);
    opacity: 0.62;
    transform: translate3d(3px, 0, 0);
  }

  58% {
    clip-path: inset(20% 0 61% 0);
    opacity: 0.46;
    transform: translate3d(-4px, 1px, 0);
  }

  68% {
    clip-path: inset(67% 0 14% 0);
    opacity: 0.6;
    transform: translate3d(2px, -1px, 0);
  }

  79% {
    clip-path: inset(35% 0 48% 0);
    opacity: 0.36;
    transform: translate3d(-2px, 0, 0);
  }

  90% {
    clip-path: inset(83% 0 5% 0);
    opacity: 0.2;
    transform: translate3d(1px, 0, 0);
  }
}

@keyframes y1cHeroGlitchWarm {
  0%,
  100% {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  9% {
    clip-path: inset(43% 0 38% 0);
    opacity: 0.54;
    transform: translate3d(4px, 0, 0);
  }

  17% {
    clip-path: inset(15% 0 69% 0);
    opacity: 0.34;
    transform: translate3d(-3px, -1px, 0);
  }

  25% {
    clip-path: inset(70% 0 13% 0);
    opacity: 0.48;
    transform: translate3d(2px, 1px, 0);
  }

  34% {
    clip-path: inset(31% 0 50% 0);
    opacity: 0.28;
    transform: translate3d(-4px, 0, 0);
  }

  42% {
    clip-path: inset(54% 0 27% 0);
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  53% {
    clip-path: inset(6% 0 77% 0);
    opacity: 0.44;
    transform: translate3d(-3px, 0, 0);
  }

  63% {
    clip-path: inset(61% 0 21% 0);
    opacity: 0.4;
    transform: translate3d(4px, -1px, 0);
  }

  73% {
    clip-path: inset(24% 0 59% 0);
    opacity: 0.34;
    transform: translate3d(-2px, 1px, 0);
  }

  84% {
    clip-path: inset(79% 0 7% 0);
    opacity: 0.22;
    transform: translate3d(2px, 0, 0);
  }

  92% {
    clip-path: inset(39% 0 45% 0);
    opacity: 0.14;
    transform: translate3d(-1px, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero-title > span.hero-glitch-text::before,
  #hero-title > span.hero-glitch-text::after,
  #hero-title > span.hero-glitch-text--active::before,
  #hero-title > span.hero-glitch-text--active::after {
    content: none !important;
    opacity: 0 !important;
    animation: none !important;
    transform: none !important;
  }
}