/**
 * title.css
 * ------------------------------------------------------------
 * Presentation Fix Pack（6-Hour Build）FIX 4 + PART 2A：Title / Start Screen。
 *
 * 視覺方向（參考使用者提供的情緒/構圖方向，不複製任何文字內容、不保留
 * 浮水印、不顯示任何網站資訊）：黑底、高對比白字、粗體/毛筆感標題字、
 * 少量粒子/噪點紋理、簡短但有力的進場動畫（白閃 -> punch-in 縮放）。
 * 整體方向：簡潔、成熟、有張力，不做花俏/裝飾性太重的效果。
 * ------------------------------------------------------------
 */

#title-root {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh; /* fallback */
  width: 100dvw;
  height: 100dvh;
  z-index: 600; /* 高於 Story/Battle 既有的所有層級（Rider Kick CUT-IN 是 500）——
                   開機畫面本來就該蓋過一切，這時 Story/Battle 都還沒開始渲染。 */
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

/* 淡淡的噪點紋理，純 CSS repeating-gradient 疊出顆粒感，不需要額外圖片素材。 */
#title-root::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 少量漂浮光點，純 CSS 多層 radial-gradient + 位移動畫，不使用圖片素材。 */
#title-particles {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background-image: radial-gradient(2px 2px at 12% 22%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 68%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(2px 2px at 46% 38%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 63% 78%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(2px 2px at 78% 24%, rgba(255, 255, 255, 0.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 60%, rgba(255, 255, 255, 0.4), transparent 60%);
  animation: titleParticleDriftAnim 14s linear infinite;
  opacity: 0.8;
}

@keyframes titleParticleDriftAnim {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4%); }
}

#title-content {
  position: relative;
  z-index: 1;
  padding: 0 6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: titlePunchInAnim 0.6s cubic-bezier(0.16, 0.9, 0.24, 1.05) both;
}

#title-main,
#title-sub {
  display: block;
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0.06em;
  color: #fdfdfd;
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.35), 0 6px 18px rgba(0, 0, 0, 0.8);
  /* 粗體 + 拉高字距 + 些微傾斜壓感，模擬毛筆/重筆刷標題字感，不需要額外
     載入自訂字型檔案（避免拖慢首次載入、離線時字型載入失敗的風險）。 */
  transform: skewX(-1.5deg);
}

#title-main {
  font-size: clamp(56px, 15vw, 148px);
}

#title-sub {
  font-size: clamp(30px, 7vw, 68px);
  letter-spacing: 0.3em;
  margin-top: 0.1em;
  color: #eaeaea;
}

@keyframes titlePunchInAnim {
  0% { opacity: 0; transform: scale(0.86); filter: brightness(2.2); }
  55% { opacity: 1; transform: scale(1.035); filter: brightness(1.15); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

/* 進場白閃：跟 #title-content 的 punch-in 同時播放，加強「衝擊」感，
   結束後自動移除（見 titleScreen.js），不會擋住之後的按鈕點擊。 */
#title-root.title-flash-in::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 5;
  animation: titleFlashAnim 0.4s ease-out forwards;
  pointer-events: none;
}

@keyframes titleFlashAnim {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

#title-menu {
  position: relative;
  z-index: 1;
  margin-top: clamp(30px, 6vh, 56px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: clamp(220px, 40vw, 320px);
}

.title-btn {
  appearance: none;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: transparent;
  color: #fff;
  font-size: clamp(15px, 2.2vh, 19px);
  font-weight: 700;
  letter-spacing: 0.35em;
  padding: clamp(12px, 1.8vh, 16px) 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.title-btn:hover,
.title-btn:focus-visible {
  background: #fff;
  color: #000;
}

.title-btn:active {
  transform: scale(0.97);
}

.title-btn[hidden] {
  display: none;
}

#title-footer {
  position: absolute;
  bottom: clamp(10px, 2vh, 18px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(9px, 1.2vh, 11px);
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.35);
  z-index: 1;
}

@media (orientation: landscape) and (max-height: 500px) {
  #title-main {
    font-size: clamp(38px, 11vh, 76px);
  }
  #title-sub {
    font-size: clamp(20px, 6vh, 36px);
  }
  #title-menu {
    margin-top: clamp(16px, 3vh, 26px);
    width: clamp(180px, 32vw, 260px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #title-particles {
    animation: none;
  }
  #title-content {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  #title-root.title-flash-in::after {
    animation: none;
    opacity: 0;
  }
}