.ai-title-ani {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  animation: titleIn 0.9s ease-out both;
}

.ai-title-ani img {
  display: block;
  width: 100%;
  height: auto;

  /* 螢光感呼吸 */
  animation: neonBreath 2.6s ease-in-out infinite;
}



/* 進場 */
@keyframes titleIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    filter: blur(4px);
  }
  60% {
    opacity: 1;
    transform: translateY(-3px) scale(1.02);
    filter: blur(0);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* 螢光呼吸 */
@keyframes neonBreath {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(225, 255, 0, 0));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(225, 255, 255, 0.65));
  }
}


/* 使用者若設定減少動畫，就不要動 */
@media (prefers-reduced-motion: reduce) {
  .ai-title-ani,
  .ai-title-ani img,
  .ai-title-ani::after {
    animation: none;
  }
}

/* ==============================
   背景動態光暈
============================== */

.hero-aurora {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.aurora {
  position: absolute;
  display: block;
  border-radius: 999px;
  filter: blur(42px);
  opacity: 0.55;
}

/* 左上黃綠光 */
.aurora-1 {
  width: 380px;
  height: 380px;
  left: 8%;
  top: 18%;
  background: radial-gradient(
    circle,
    rgba(225, 255, 0, 0.35) 0%,
    rgba(225, 255, 0, 0.16) 38%,
    rgba(225, 255, 0, 0) 70%
  );
  animation: auroraMove1 8s ease-in-out infinite;
}

/* 右側藍光 */
.aurora-2 {
  width: 520px;
  height: 520px;
  right: -8%;
  top: 22%;
  background: radial-gradient(
    circle,
    rgba(47, 213, 255, 0.32) 0%,
    rgba(47, 213, 255, 0.14) 40%,
    rgba(47, 213, 255, 0) 72%
  );
  animation: auroraMove2 10s ease-in-out infinite;
}

/* 下方紫藍光 */
.aurora-3 {
  width: 600px;
  height: 600px;
  left: 34%;
  bottom: -26%;
  background: radial-gradient(
    circle,
    rgba(120, 86, 255, 0.26) 0%,
    rgba(120, 86, 255, 0.12) 42%,
    rgba(120, 86, 255, 0) 74%
  );
  animation: auroraMove3 12s ease-in-out infinite;
}

@keyframes auroraMove1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.42;
  }
  50% {
    transform: translate(80px, 40px) scale(1.16);
    opacity: 0.72;
  }
}

@keyframes auroraMove2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.45;
  }
  50% {
    transform: translate(-90px, 60px) scale(1.12);
    opacity: 0.75;
  }
}

@keyframes auroraMove3 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.36;
  }
  50% {
    transform: translate(-40px, -80px) scale(1.18);
    opacity: 0.62;
  }
}

/* ==============================
   人物區域輪流變亮，不疊圖版
============================== */

.hero {
  position: relative;
  isolation: isolate;
}

.hero::before {
  z-index: 0;
}

.hero::after {
  z-index: 1;
}

.hero-focus {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.focus-light {
  position: absolute;
  inset: 0;
  opacity: 0;

  /* 真正把後面的底圖變亮 */
  backdrop-filter: brightness(1.55) contrast(1.08) saturate(1.15);
  -webkit-backdrop-filter: brightness(1.55) contrast(1.08) saturate(1.15);

  /* 補一點光暈顏色 */
  background: radial-gradient(
    ellipse at var(--light-x) var(--light-y),
    rgba(225,255,0,.20) 0%,
    rgba(47,213,255,.14) 24%,
    rgba(47,213,255,.06) 38%,
    rgba(47,213,255,0) 56%
  );

  /* 限制只亮局部區域 */
  mask-image: radial-gradient(
    ellipse at var(--light-x) var(--light-y),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 22%,
    rgba(0,0,0,.55) 34%,
    rgba(0,0,0,0) 52%
  );

  -webkit-mask-image: radial-gradient(
    ellipse at var(--light-x) var(--light-y),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 22%,
    rgba(0,0,0,.55) 34%,
    rgba(0,0,0,0) 52%
  );
}


/* 左邊人物 */
.focus-left {
  --light-x: 18%;
  --light-y: 50%;
  animation: focusLeft 9s ease-in-out infinite;
}

/* 中間人物 */
.focus-center {
  --light-x: 52%;
  --light-y: 48%;
  animation: focusCenter 9s ease-in-out infinite;
}

/* 右邊人物 */
.focus-right {
  --light-x: 86%;
  --light-y: 48%;
  animation: focusRight 9s ease-in-out infinite;
}


/* 標題要在光暈上面 */
.hero-content {
  position: relative;
  z-index: 5;
}
/* 左邊亮：0s ~ 3s */
@keyframes focusLeft {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  6% {
    opacity: .9;
  }

  24% {
    opacity: .9;
  }

  34% {
    opacity: 0;
    transform: scale(1.04);
  }

  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

/* 中間亮：3s ~ 6s */
@keyframes focusCenter {
  0%, 30% {
    opacity: 0;
    transform: scale(1);
  }

  38% {
    opacity: .9;
  }

  56% {
    opacity: .9;
  }

  66% {
    opacity: 0;
    transform: scale(1.04);
  }

  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

/* 右邊亮：6s ~ 9s */
@keyframes focusRight {
  0%, 62% {
    opacity: 0;
    transform: scale(1);
  }

  70% {
    opacity: .9;
  }

  88% {
    opacity: .9;
  }

  98%, 100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

/* ==============================
  First
============================== */