@charset "utf-8";
/* slide.css - 內頁 Page Header 微華麗動畫 */

.container-fluid.page-header.page-header-animated {
  position: relative;
  overflow: hidden;
  /* 背景輕微 zoom + 位移 */
  animation: headerBgZoom 18s ease-in-out infinite alternate;
}

/* 內容淡入＋上移 */
.page-header-animated > .container.text-center {
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: headerContentFadeUp 0.9s ease-out forwards;
  animation-delay: 0.2s;
}

/* 頂部暗角 + 呼吸 */
.page-header-animated::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(0,0,0,0.35), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.65));
  mix-blend-mode: multiply;
  opacity: 0.9;
  pointer-events: none;
  animation: headerBreath 6s ease-in-out infinite;
}

/* 掃光效果（很淡的斜向亮帶） */
.page-header-animated::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 40%,
    transparent 80%
  );
  opacity: 0.0;
  transform: translateX(-120%);
  pointer-events: none;
  animation: headerSheen 10s linear infinite;
}

/* 標題底線 */
.page-header-animated h1.display-4 {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.page-header-animated h1.display-4::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #ffda7b, #ff9d5a);
  border-radius: 999px;
  animation: headerTitleLine 0.8s ease-out forwards;
  animation-delay: 0.5s;
}

/* 麵包屑輕微淡入 */
.page-header-animated .breadcrumb {
  opacity: 0;
  animation: headerBreadcrumbFade 0.7s ease-out forwards;
  animation-delay: 0.35s;
}

/* 背景 zoom + 位移（不會太誇張） */
@keyframes headerBgZoom {
  0% {
    background-size: 100% auto;
    background-position: center bottom;
  }
  100% {
    background-size: 125% auto;
    background-position: center 18%;
  }
}

/* 內容淡入＋上移 */
@keyframes headerContentFadeUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 暗角呼吸 */
@keyframes headerBreath {
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.7;
  }
}

/* 掃光由左到右，只有中間一段微亮 */
@keyframes headerSheen {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 0.5;
  }
  60% {
    opacity: 0.5;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

/* 標題底線從中間向兩側展開 */
@keyframes headerTitleLine {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 72%;
    opacity: 1;
  }
}

/* 麵包屑淡入 */
@keyframes headerBreadcrumbFade {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 手機時 Header 不要 zoom 那麼多 */
@media (max-width: 767.98px) {
  @keyframes headerBgZoom {
    0% {
      background-size: cover;
      background-position: center center;
    }
    100% {
      background-size: 108% auto;
      background-position: center 10%;
    }
  }

  .page-header-animated > .container.text-center {
    padding-inline: 24px;
  }
}