/* ═══ ═══ ═══ 潮牌風格首頁（2026-09-05 重設計）═══ ═══ ═══ */

/* Hero：滿版黑底潮牌（2026-09-07 不再 100vh 佔滿，hero＋數據牆收進首屏） */
.hero-street {
  display: flex; align-items: center;
  background: var(--bg); position: relative; overflow: hidden;
}
/* 滿版連續底色：單一 radial 鋪滿整個 hero，中心在獅子處、往左自然淡出到 α≈0——
   舊版 ::before 只蓋右半 50%，在 50% 處留下一條「左純黑／右漸層」的分界線
   （2026-09-08 Nick 回報左右融合不自然），改成整條 hero 共用同一層漸層。 */
.hero-bg-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 160% at 72% 50%,
    rgba(139,124,246,.10) 0%, rgba(255,62,127,.05) 38%, rgba(10,10,15,0) 72%);
}
.hero-street-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; padding: 44px 40px 32px; width: 100%; position: relative; z-index: 1;
}
.hero-street-text { flex: 1; max-width: 600px; }
.hero-street-tag {
  font-size: 12px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--accent-lime); font-weight: 600; margin-bottom: 16px;
}
/* hero 標題字級：2 行時最寬行實測（÷84px）為 zh 5.25em、en 8.19em、ja 7.27em。
   同一字級下 en/ja 的 2 行會超出 600px 文字欄，故用語言縮放係數把最寬行壓回欄寬內、
   維持 2 行不折行（2026-09-15 Nick 要求 en/ja 也改 2 行）。html 的 lang 由
   js/i18n.js 的 applyLang() 設定；靜態 HTML 是 lang="zh-Hant"，與 zh 文案一致（係數 1）。 */
:root { --hero-title-scale: 1; }
html[lang="en"] { --hero-title-scale: .8; }
html[lang="ja"] { --hero-title-scale: .9; }
.hero-street-title {
  font-size: calc(var(--hero-title-scale) * clamp(40px, 7vw, 84px));
  font-weight: 800; line-height: .95;
  color: var(--ink); letter-spacing: -2px; margin: 0 0 20px;
}
.hero-accent { color: var(--accent-pink); }
.hero-street-sub { font-size: 16px; color: var(--muted); margin-bottom: 24px; }
.hero-street-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-pink); color: var(--bg); font-weight: 700;
  font-size: 16px; padding: 16px 32px; border-radius: 0;
  text-decoration: none; transition: all .2s ease; border: none; cursor: pointer;
}
.hero-street-cta:hover { background: var(--ink); color: var(--accent-pink); }
.cta-arrow { transition: transform .2s; }
.hero-street-cta:hover .cta-arrow { transform: translateX(6px); }
.hero-street-lion { flex-shrink: 0; width: 40%; display: flex; justify-content: flex-end; position: relative; }
.hero-lion-img {
  /* 2:3 直立圖：以高度為限才不會把 hero 撐高（2026-09-07） */
  width: auto; height: auto; max-width: 420px; max-height: 480px;
  position: relative; z-index: 2; /* 在 ambience(音符/韓字) 之上 */
  opacity: .85;
  filter: drop-shadow(0 0 40px rgba(255,62,127,.2));
  /* PNG 本身全透明，不需要 screen 混色；mix-blend 會讓鬃毛在光暈上被洗白（2026-09-08） */
  animation: lion-sing 2.8s ease-in-out infinite; /* 強烈點：擺動＋點頭＋律動 */
}
@keyframes lion-sing {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25%      { transform: translateY(-6px) rotate(-1.6deg) scale(1.01); }
  50%      { transform: translateY(-14px) rotate(1.4deg) scale(1.05); }
  75%      { transform: translateY(-5px) rotate(-.8deg) scale(1.02); }
}

/* 數據牆 */
.stats-street {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 28px 40px; background: var(--bg-sub);
}
.stats-inner { display: flex; justify-content: center; gap: 48px; max-width: 800px; margin: 0 auto; }
.stat-item { text-align: center; }
.stat-number {
  display: block; font-size: clamp(36px, 6vw, 72px); font-weight: 800;
  color: var(--accent-lime); line-height: 1; letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted); margin-top: 6px; font-weight: 600;
}
.stat-divider { width: 1px; background: var(--border); align-self: stretch; }

/* 功能導覽 */
/* 核心功能：桌面一排 4 張（2026-09-11 Nick 要求緊湊化，原 2×2 兩排） */
.features-street { padding: 56px 40px; background: var(--bg); }
.features-street-tag {
  font-size: 12px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--accent-cyan); font-weight: 600; margin-bottom: 24px; display: block;
  max-width: 1200px; margin-left: auto; margin-right: auto;
}
.features-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  max-width: 1200px; margin: 0 auto;
}
.feature-card {
  background: var(--surface, #1A1A24); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px; text-decoration: none; display: block;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.feature-card:hover {
  border-color: var(--accent-pink); transform: translateY(-4px);
  box-shadow: 0 0 30px rgba(255,62,127,.15), 0 8px 24px rgba(0,0,0,.4);
}
.feature-icon { font-size: 28px; display: block; margin-bottom: 10px; }
.feature-title {
  font-size: 16px; font-weight: 700; color: var(--ink);
  margin: 0 0 6px; letter-spacing: 1px;
}
.feature-desc { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.feature-cta { font-size: 12px; font-weight: 600; color: var(--accent-pink); letter-spacing: 1px; }

/* 藝人跑馬燈 */
.marquee-street {
  border-top: 1px solid var(--border); padding: 24px 0; overflow: hidden;
  background: var(--bg-sub);
}
.marquee-track {
  display: flex; gap: 24px; white-space: nowrap; align-items: center;
  animation: marqueeScroll 30s linear infinite; width: max-content;
}
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-item {
  font-size: 18px; font-weight: 700; color: var(--muted);
  letter-spacing: 1px; transition: color .2s; cursor: pointer;
}
.marquee-item:hover { color: var(--accent-pink); }
.marquee-dot { color: var(--accent-pink); font-size: 8px; }

/* 響應式：手機（stats 改橫排，首屏放得下 hero＋數據牆） */
@media (max-width: 767px) {
  .hero-street-inner { flex-direction: column; text-align: center; padding: 28px 20px 20px; }
  .hero-street-lion { margin-top: 12px; width: 45%; }
  .hero-street-title { font-size: calc(var(--hero-title-scale) * clamp(30px, 10vw, 52px)); }
  .hero-street-cta { font-size: 15px; padding: 12px 24px; }
  .stats-street { padding: 14px 12px; }
  .stats-inner { flex-direction: row; gap: 0; justify-content: space-around; max-width: 440px; }
  .stat-number { font-size: clamp(26px, 9vw, 44px); }
  .stat-label { font-size: 10px; letter-spacing: 2px; margin-top: 4px; }
  .stat-divider { width: 1px; height: auto; align-self: stretch; }
  /* 核心功能：手機 2 排 2 欄（2026-09-15 Nick 要求），卡片縮一格以配合半寬 */
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .features-street { padding: 48px 20px; }
  .feature-card { padding: 16px 14px; }
  .feature-icon { font-size: 24px; margin-bottom: 8px; }
  .feature-title { font-size: 15px; }
  .feature-desc { font-size: 12px; margin-bottom: 10px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .features-grid { grid-template-columns: 1fr 1fr; }  /* 平板回 2×2 */
}

/* 手機（<600px）額外覆寫 */
@media (max-width: 600px) {
  .hero-street-title { font-size: calc(var(--hero-title-scale) * clamp(28px, 11vw, 48px)); }
  .hero-street-lion { width: 40%; }
  .hero-lion-img { max-width: 135px; max-height: 180px; }
  .stat-label { font-size: 9px; letter-spacing: 1.5px; }
}

/* 短手機（高 ≤800px）：直立獅子讓位，hero 只留文字（首屏必須給 stats） */
@media (max-width: 600px) and (max-height: 800px) {
  .hero-street-lion { display: none; }
}

/* 平板直式/中型桌機（768–1023px，非矮窗 tier）：直立圖不超過文字欄高 */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-lion-img { max-height: 380px; }
}

/* 矮視窗（筆電/嵌入式預覽，768px+ 寬）：再壓一級，確保 hero＋數據牆仍在首屏 */
@media (max-height: 800px) and (min-width: 768px) {
  .hero-street-inner { padding: 24px 40px 16px; }
  .hero-street-tag { margin-bottom: 10px; }
  .hero-street-title { font-size: calc(var(--hero-title-scale) * clamp(30px, 5.5vw, 60px)); margin-bottom: 14px; }
  .hero-street-sub { margin-bottom: 18px; }
  .hero-street-cta { padding: 12px 26px; font-size: 15px; }
  .hero-lion-img { max-width: 280px; max-height: 340px; }
  .stats-street { padding: 20px 40px; }
  .stat-number { font-size: clamp(26px, 4.5vw, 52px); }
}

/* ═══ 酷酷力「高歌」動態 ambience（2026-09-07 Nick 要求；09-07 激しめ演出版）═══ */
/* 音符/韓字/聲波/閃光留在獅子容器內（小元件，跟著獅子走）；
   光暈已升級到 .hero-bg-glow（整個 hero 一層）——舊版三團光暈放這個 40% 寬容器裡，
   被 overflow:hidden 切成矩形框線（2026-09-08 Nick 回報），大面積柔光不可放在裁切容器內。 */
.hero-ambience { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

/* ── 背景光暈（.hero-bg-glow 滿版層內）：blur を使わず「端で α=0」の大きな radial。
      定位以 hero 全域為座標（左：百分比中心 − 半徑），並讓可視範圍（α=0 的 72% 半徑，
      含 drift scale 1.18）完全落在 hero 內，任何邊都不出現硬切線 ── */
.ha-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: ha-drift 6s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.ha-glow.g1 {
  width: 520px; height: 520px; left: calc(68% - 260px); top: calc(62% - 260px);
  background: radial-gradient(closest-side, rgba(255,62,127,.5), rgba(255,62,127,.28) 48%, rgba(255,62,127,0) 72%);
  opacity: .8;
}
.ha-glow.g2 {
  width: 460px; height: 460px; left: calc(82% - 230px); top: calc(32% - 230px);
  background: radial-gradient(closest-side, rgba(139,124,246,.5), rgba(139,124,246,.26) 48%, rgba(139,124,246,0) 72%);
  opacity: .8; animation-delay: -3s;
}
.ha-glow.g3 {
  width: 400px; height: 400px; left: calc(24% - 200px); top: calc(74% - 200px);
  background: radial-gradient(closest-side, rgba(62,240,255,.42), rgba(62,240,255,.2) 50%, rgba(62,240,255,0) 74%);
  opacity: .7; animation-delay: -1.5s;
  animation: ha-drift 6s ease-in-out infinite alternate, ha-hue 5s linear infinite;
}
@keyframes ha-drift {
  from { transform: translate3d(-10px, 8px, 0) scale(1); }
  to   { transform: translate3d(12px, -14px, 0) scale(1.18); }
}
@keyframes ha-hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(60deg); }
}


/* ── 拡散声波：早く・大きく ── */
.ha-ring {
  position: absolute; left: 56%; top: 46%; width: 120px; height: 120px;
  margin: -60px 0 0 -60px; border-radius: 50%;
  border: 3px solid rgba(255,62,127,.65); opacity: 0; z-index: 3;
  animation: ha-ring 2.4s ease-out infinite;
}
.ha-ring.r2 { border-color: rgba(62,240,255,.55); animation-delay: -.8s; }
.ha-ring.r3 { border-color: rgba(200,255,62,.5); animation-delay: -1.6s; }
@keyframes ha-ring {
  0%   { transform: scale(.15); opacity: .85; }
  100% { transform: scale(2.6); opacity: 0; }
}


/* ── 跳動音符：速く・大きく飛ぶ ── */
.ha-note {
  position: absolute; font-size: 22px; line-height: 1; opacity: .95; z-index: 3;
  animation: ha-note 1.6s ease-in-out infinite alternate;
  text-shadow: 0 0 12px rgba(0,0,0,.55), 0 0 18px rgba(255,62,127,.35);
}
.ha-note.f { font-size: 15px; } /* 前景偶發小音符，別擋太多 */
@keyframes ha-note {
  from { transform: translateY(0) rotate(-16deg) scale(1); }
  50%  { transform: translateY(-22px) rotate(2deg) scale(1.15); }
  to   { transform: translateY(-44px) rotate(20deg) scale(1.28); }
}

/* ── 浮遊韓文：上下＋左右揺れ＋拡大 ── */
.ha-word {
  position: absolute; font-weight: 800; line-height: 1.1; white-space: nowrap;
  font-size: 19px; opacity: .8; z-index: 3; letter-spacing: 0;
  text-shadow: 0 0 10px rgba(0,0,0,.5);
  animation: ha-word 2.6s ease-in-out infinite alternate;
}
@keyframes ha-word {
  from { transform: translateY(0) rotate(-3deg) scale(1); }
  50%  { transform: translateY(-16px) rotate(2deg) scale(1.05); }
  to   { transform: translateY(-34px) rotate(4deg) scale(1.12); }
}

/* ── スパークル：キラキラ点滅 ── */
.ha-spark { position: absolute; z-index: 3; font-size: 13px; opacity: 0; animation: ha-spark 2s ease-in-out infinite; }
.ha-spark.s1 { left: 12%;  top: 18%; animation-duration: 1.5s; color: var(--accent-lime); }
.ha-spark.s2 { left: 88%; top: 10%; animation-duration: 1.9s; animation-delay: -.4s; color: var(--amber-text); }
.ha-spark.s3 { left: 72%; top: 38%; animation-duration: 1.4s; animation-delay: -.9s; color: var(--accent-cyan); }
.ha-spark.s4 { left: 18%; top: 62%; animation-duration: 1.7s; animation-delay: -.2s; color: var(--accent-pink); }
.ha-spark.s5 { left: 60%; top: 82%; animation-duration: 2.2s; animation-delay: -1.1s; color: var(--accent-lime); }
.ha-spark.s6 { left: 40%; top: 28%; animation-duration: 1.6s; animation-delay: -.6s; color: var(--purple-text); }
@keyframes ha-spark {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(-20deg); }
  50%      { opacity: 1; transform: scale(1.35) rotate(20deg); }
}

.n-lime, .w-lime { color: var(--accent-lime); }
.n-pink, .w-pink { color: var(--accent-pink); }
.n-cyan, .w-cyan { color: var(--accent-cyan); }
.n-lav, .w-lav { color: var(--purple-text); }
.n-amber, .w-amber { color: var(--amber-text); }
.w-mint { color: var(--mint); }

/* 手機：減量，避免小螢幕太花 */
@media (max-width: 767px) {
  .ha-word-xtra { display: none; }
  .ha-note { font-size: 15px; }
  .ha-ring { width: 80px; height: 80px; margin: -40px 0 0 -40px; left: 50%; top: 46%; }
  .ha-glow { opacity: .4; }
  .ha-spark { font-size: 10px; }
}

/* 尊重系統「減少動態」設定 */
@media (prefers-reduced-motion: reduce) {
  .hero-lion-img, .ha-glow, .ha-ring, .ha-note, .ha-word, .ha-spark { animation: none !important; }
  .ha-ring { opacity: 0; }
  .ha-note, .ha-word, .ha-spark { opacity: .85; }
}