/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg-dark:   #0d0922;
  --gold-hi:   #fffce8;
  --gold-lo:   #cca66e;
  --gold:      #edd4ae;
  --kv-dim:    .2;
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-pop:  cubic-bezier(.2, 1.25, .4, 1);
  --u: clamp(.5923px, .078125vw, 1.2756px);   /* 設計稿 1px */
}
html, body { background: #000; }
body { font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ── HEADER ── */
#hd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; height: calc(60 * var(--u)); padding: 0 calc(20 * var(--u));
  background: linear-gradient(180deg, #000415, var(--bg-dark));
  opacity: 0; transition: opacity 1.2s ease;
}
#hd::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(118 * var(--u)); pointer-events: none;
  background: linear-gradient(180deg, var(--bg-dark), rgba(13, 9, 34, 0));
}
body.is-ready #hd { opacity: 1; }
#hd .hd-logo img { width: calc(60 * var(--u)); }
#hd .hd-nav {
  display: flex; align-items: center; gap: calc(15 * var(--u));
  margin-left: auto; padding-right: calc(28 * var(--u));
  font-family: 'Poppins', 'Noto Sans TC', sans-serif; font-size: calc(16 * var(--u)); line-height: 1.5; color: #fff;
}
#hd .hd-nav a { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); transition: color .2s ease; }
#hd .hd-nav a:hover { color: var(--gold); }
#hd .hd-nav svg { width: calc(12 * var(--u)); height: calc(8 * var(--u)); }
#hd .hd-social { display: flex; gap: calc(10 * var(--u)); padding-right: calc(20 * var(--u)); }
#hd .hd-social a { transition: filter .2s ease; }
#hd .hd-social a:hover { filter: brightness(1.15); }
#hd .hd-social img { width: calc(30 * var(--u)); }
#hd .hd-burger { display: none; }

/* ── KV ── */
#kv {
  --mx: 0; --my: 0;
  position: relative; height: 100vh; min-height: calc(640 * var(--u)); overflow: hidden; background: #000;
}
#kv .kv-bg, #kv .kv-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
#kv .kv-bg img { object-fit: cover; object-position: center; max-width: none; }
#kv .kv-bg {
  opacity: 0; transition: opacity 1.2s ease;
  transform: translate3d(calc(var(--mx) * -5px), calc(var(--my) * -5px), 0) scale(1.02);
}
#kv .kv-dim { position: absolute; inset: 0; background: #000; opacity: var(--kv-dim); pointer-events: none; }
#kv canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#kv .kv-embers { opacity: 0; transition: opacity 1.2s ease; z-index: 1; }
#kv .kv-glint { z-index: 3; }

#kv .kv-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 4vh;
}
#kv .kv-logo { width: calc(439 * var(--u)); transform: scale(.55); opacity: 0; transition: transform 1.5s var(--ease-pop), opacity 1s ease; }
#kv .kv-btns { display: flex; gap: calc(18.45 * var(--u)); margin-top: calc(30 * var(--u)); }
#kv .kv-rating { width: calc(66 * var(--u)); margin-top: calc(30 * var(--u)); filter: drop-shadow(0 calc(4 * var(--u)) calc(15 * var(--u)) rgba(0, 0, 0, .55)); }
#kv .kv-scroll img { width: 100%; }
#kv .kv-scroll { width: calc(49 * var(--u)); margin-top: calc(20 * var(--u)); margin-bottom: calc(-10 * var(--u)); }

/* ── 主按鈕 ── */
.btn-main {
  position: relative; display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  width: calc(235.4 * var(--u)); height: calc(59.7 * var(--u));
  background: url("../images/btn-main-frame@2x.png") center / 100% 100% no-repeat;
  transition: filter .25s ease, translate .25s ease;
}
.btn-main::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../images/btn-main-frame-hover@2x.png") center / 100% 100% no-repeat;
  opacity: 0; transition: opacity .3s ease;
}
.btn-main > * { position: relative; z-index: 1; }
.btn-main:hover, .btn-main:focus-visible { filter: brightness(1.2); translate: 0 -5px; }
.btn-main:hover::before, .btn-main:focus-visible::before { opacity: 1; }
.btn-main .icon { height: calc(25 * var(--u)); width: auto; }
.btn-main .icon.is-topup { height: calc(26 * var(--u)); }
.btn-main .label {
  font-size: calc(24 * var(--u)); font-weight: 500; line-height: 1;
  transform: translateY(calc(-2 * var(--u)));
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── KV 進場 ── */
#kv.is-bg-in .kv-bg, #kv.is-bg-in .kv-embers { opacity: 1; }
#kv.is-logo-in .kv-logo { transform: scale(1); opacity: 1; }
#kv .kv-enter {
  opacity: 0; transform: translateY(calc(24 * var(--u)));
  transition: opacity .6s ease var(--d, 0s), transform .6s var(--ease-out) var(--d, 0s), filter .25s ease, translate .25s ease;
}
#kv.is-actions-in .kv-enter { opacity: 1; transform: none; }
#kv.is-actions-in .kv-scroll img { animation: kv-bob 1.6s ease-in-out calc(var(--d, 0s) + .6s) infinite; }
@keyframes kv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(8 * var(--u))); } }

/* ── 手機／直式（設計稿 390 寬） ── */
@media (max-aspect-ratio: 1/1), (max-width: 768px) {
  :root { --u: min(calc(100vw / 390), 1.25px); }
  #hd { height: calc(54 * var(--u)); padding: 0 calc(16 * var(--u)); }
  #hd .hd-logo img { width: calc(50 * var(--u)); }
  #hd .hd-nav, #hd .hd-social { display: none; }
  #hd .hd-burger {
    display: flex; flex-direction: column; gap: calc(5 * var(--u)); margin-left: auto;
    padding: calc(8 * var(--u)) 0; background: none; border: 0; cursor: pointer;
  }
  #hd .hd-burger span { display: block; width: calc(43 * var(--u)); height: calc(2 * var(--u)); border-radius: 1px; background: var(--gold); }
  #kv .kv-logo { width: calc(280 * var(--u)); }
  #kv .kv-btns { flex-direction: column; gap: calc(14 * var(--u)); margin-top: calc(14 * var(--u)); }
  #kv .kv-rating { width: calc(52.8 * var(--u)); margin-top: calc(14 * var(--u)); }
  #kv .kv-scroll { margin-top: calc(4 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  #hd, #kv .kv-bg, #kv .kv-logo, #kv .kv-enter { transition: none; }
  #kv .kv-scroll img { animation: none !important; }
}