/* 全局設定 */
body {
  margin: 0;
  padding: 0;
  font-family: "Arial", sans-serif;
  background-color: #3a2d54;   /* 紫色底色 */
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* 版面容器 */
.container {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  isolation: isolate;
}

/* 背景 SVG（完整顯示、不裁切；若要滿版改 cover） */
.bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
  animation: kenburns 28s ease-in-out infinite;
  will-change: transform;
  z-index: -3;
}

/* 投影燈光掃過（spotlight） */
.spotlight {
  position: absolute;
  inset: -20%;
  /* 橢圓光束，從左到右掃過 */
  background:
    radial-gradient(ellipse 22% 65% at 0% 50%,
      rgba(255, 245, 210, 0.28) 0%,
      rgba(255, 245, 210, 0.18) 35%,
      rgba(255, 245, 210, 0.00) 65%);
  filter: blur(8px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: sweep 9s ease-in-out infinite;
  z-index: -2;
}

/* 微微閃爍感（像片門/投影機的亮度起伏） */
.flicker {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.06), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: .18;
  animation: flicker 120ms steps(2, end) infinite;
  z-index: -1;
}

/* 淡遮罩，讓文字更清楚（可依喜好調整或移除） */
.scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 15% 80%,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0) 70%);
  pointer-events: none;
}

/* 文字區塊：往上移，避免與 LOGO 疊到 */
.hero-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 這行決定「高度」：可依視覺再微調 */
  top: clamp(10vh, 22vh, 28vh);
  text-align: center;
  padding: 1rem 1.25rem;
}

/* Coming soon 字樣（掃光＋呼吸） */
.coming {
  display: inline-block;
  font-weight: 800;
  font-size: clamp(32px, 6vw, 72px);
  letter-spacing: 0.02em;

  /* 金色基底＋掃光 */
  background: linear-gradient(90deg, #d6c35c 20%, #ffffff 40%, #d6c35c 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* 發光 */
  text-shadow:
    0 0 8px rgba(214,195,92,0.35),
    0 0 16px rgba(214,195,92,0.25);

  animation:
    shine 3.6s linear infinite,
    breathe 3.2s ease-in-out infinite;
}

/* 動畫定義 */
@keyframes kenburns {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  50%  { transform: scale(1.06) translate3d(0.6%, -0.6%, 0); }
  100% { transform: scale(1) translate3d(0, 0, 0); }
}

@keyframes sweep {
  0%   { transform: translateX(-30%) rotate(-8deg) scale(1);   opacity: 0.65; }
  50%  { transform: translateX(30%)  rotate( 8deg) scale(1.05); opacity: 0.85; }
  100% { transform: translateX(-30%) rotate(-8deg) scale(1);   opacity: 0.65; }
}

@keyframes flicker {
  /* 非完全隨機，但模擬投影燈微閃 */
  0%, 19%, 21%, 23%, 80%, 100% { opacity: .14; }
  20%, 24% { opacity: .25; }
  55% { opacity: .20; }
  60% { opacity: .28; }
}

@keyframes shine {
  0%   { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}

@keyframes breathe {
  0%, 100% { letter-spacing: 0.02em; filter: drop-shadow(0 0 0px rgba(214,195,92,0.25)); }
  50%      { letter-spacing: 0.06em; filter: drop-shadow(0 0 6px rgba(214,195,92,0.55)); }
}

/* 使用者偏好減少動態時，停用動畫 */
@media (prefers-reduced-motion: reduce) {
  .bg-img, .spotlight, .flicker, .coming {
    animation: none !important;
  }
}