/* hero-anim.css */

/* Hero 背景和覆盖层初始模糊状态 */
.hero-overlay {
  filter: blur(8px);
  opacity: 0.5;
  transition: filter 2s ease, opacity 2s ease;
}

/* 加载完成后渐变清晰 */
.hero-overlay.show {
  filter: blur(0);
  opacity: 1;
}

/* 打字机文字初始半透明状态 */
#subtitle {
  opacity: 0.3;
  background: linear-gradient(90deg, #ffffff, #ffd700, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200%;
  transition: opacity 2s ease, filter 2s ease;
  filter: blur(2px);
  animation: highlightText 2s ease forwards;
}

/* 当添加 show 类时，文字渐变到高亮清晰 */
#subtitle.show {
  opacity: 1;
  filter: blur(0);
}

/* 渐变高亮动画 */
@keyframes highlightText {
  0% {
    background-position: 0% 0%;
    opacity: 0.3;
    filter: blur(2px);
  }
  100% {
    background-position: 100% 0%;
    opacity: 1;
    filter: blur(0);
  }
}

@-webkit-keyframes highlightText {
  0% {
    background-position: 0% 0%;
    opacity: 0.3;
    -webkit-filter: blur(2px);
  }
  100% {
    background-position: 100% 0%;
    opacity: 1;
    -webkit-filter: blur(0);
  }
}