:root {
  --bg: #6f819d;            /* 原片背景取樣色 */
  --ivory: #f6f1e7;
  --muted: #d9d3c7;
  --muted-2: rgba(233, 227, 214, 0.62);
  --cream: #eadcc2;
  --line: rgba(246, 241, 231, 0.22);
  --gutter: clamp(20px, 5.5vw, 96px);
  --header-h: 88px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;           /* 單畫面作品，無捲動 */
  touch-action: none;         /* 手機拖曳＝移動視線，不捲頁 */
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); letter-spacing: 0.08em; }
.muted { color: var(--muted-2); }

/* ---------- Stage ---------- */
#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--bg);
}

/* 只為文字可讀性在左側壓一層同色系的暗，不改原片主色 */
.scrim {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(24, 32, 48, 0.42) 0%, rgba(24, 32, 48, 0.18) 34%, rgba(24, 32, 48, 0) 52%);
}

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}
.loader__inner { display: grid; gap: 14px; width: min(220px, 60vw); }
.loader__pct { font-size: 11px; color: var(--ivory); }
.loader__bar { position: relative; height: 1px; background: rgba(246, 241, 231, 0.2); overflow: hidden; }
.loader__fill {
  position: absolute; inset: 0;
  background: var(--ivory);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.25s linear;
}
body.is-ready .loader { opacity: 0; visibility: hidden; }

/* ---------- Page ---------- */
.page {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: var(--header-h) 1fr auto;
  pointer-events: none;       /* 游標穿透；按鈕另開 */
}

.header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  font-size: 11px;
}
.header::after {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: 0;
  height: 1px;
  background: var(--line);
}
.header__left { display: flex; gap: 18px; align-items: baseline; }
.brand { font-weight: 500; color: var(--ivory); letter-spacing: 0.14em; }
.brand sup { font-size: 0.7em; margin-left: 1px; }
.header__center {
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--ivory);
  font-weight: 500;
}
.header__right { justify-self: end; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cream);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- Hero ---------- */
.hero {
  align-self: center;
  padding: 0 var(--gutter);
  margin-top: -6vh;           /* 略高於中央 */
  max-width: 50vw;
}
.hero__label {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--cream);
  margin-bottom: clamp(16px, 2.4vh, 28px);
}
.hero__title {
  font-weight: 900;
  font-size: clamp(44px, 6.3vw, 116px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.hero__title .line { display: block; white-space: nowrap; }
.hero__title .solid { color: var(--ivory); }
.hero__title .outline {
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(246, 241, 231, 0.92);
}

.hero__row {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.2vw, 52px);
  margin-top: clamp(24px, 4.2vh, 48px);
}
.hero__desc {
  max-width: 380px;
  text-wrap: pretty;
  font-size: 15px;
  line-height: 1.95;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.hero__desc .ph { display: inline-block; }   /* 只在片語之間換行 */

/* ---------- CTA ---------- */
.cta {
  pointer-events: auto;
  flex: none;
  width: 118px; height: 118px;
  border-radius: 50%;
  border: 0;
  background: var(--ivory);
  color: #1d2533;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.08em;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.45s var(--ease);
}
.cta__text, .cta__arrow { transition: transform 0.45s var(--ease); }
.cta:hover, .cta:focus-visible { background: var(--cream); }
.cta:hover .cta__text { transform: translateY(-2px); }
.cta:hover .cta__arrow { transform: translateX(4px); }
.cta:focus-visible { outline: 1px solid var(--ivory); outline-offset: 6px; }

/* ---------- Status ---------- */
.status {
  list-style: none;
  display: flex;
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(28px, 5vh, 56px);
  font-size: 11px;
}
.status li { display: flex; gap: 8px; align-items: baseline; }
.status b { font-weight: 500; color: var(--ivory); }
.status span { font-size: 10px; color: var(--muted-2); }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 18px var(--gutter) 22px;
  font-size: 10px;
  color: var(--muted-2);
}
.footer::before {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter); top: 0;
  height: 1px;
  background: var(--line);
}

/* ---------- Entrance ---------- */
[data-in] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms + 250ms);
}
body.is-ready [data-in] { opacity: 1; transform: none; }
/* CTA 的 transform 另有 hover 用途，進場只做淡入 */
.cta[data-in] { transform: none; }

/* ---------- Custom cursor ---------- */
.cursor { position: fixed; inset: 0; z-index: 30; pointer-events: none; display: none; }
.cursor__dot, .cursor__ring {
  position: absolute; left: 0; top: 0;
  border-radius: 50%;
  will-change: transform;
}
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--cream); }
.cursor__ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(246, 241, 231, 0.55);
  transition: width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), border-color 0.35s;
}
.cursor.is-hover .cursor__ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: rgba(234, 220, 194, 0.8); }

@media (hover: hover) and (pointer: fine) {
  body.is-ready .cursor { display: block; }
  body.is-ready, body.is-ready .cta { cursor: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  :root { --header-h: 80px; }
  .hero { max-width: 56vw; }
  .hero__title { font-size: clamp(40px, 6vw, 72px); }
  .hero__row { gap: 28px; }
  .hero__desc { font-size: 14px; max-width: 280px; }
  .cta { width: 104px; height: 104px; font-size: 12px; }
  .header__left .muted { display: none; }
}

/* ---------- Mobile（與直式平板共用：角色在上、文字在下） ---------- */
@media (max-width: 720px), (max-aspect-ratio: 5/4) {
  :root { --header-h: 64px; --gutter: 20px; }
  .header { grid-template-columns: auto 1fr; font-size: 10px; }
  .header__center { display: none; }
  .header__right { font-size: 10px; }
  .scrim {
    background: linear-gradient(0deg, rgba(20, 27, 40, 0.72) 0%, rgba(20, 27, 40, 0.4) 38%, rgba(20, 27, 40, 0) 60%);
  }
  .hero {
    align-self: end;
    max-width: none;
    margin-top: 0;
    padding-bottom: 8px;
  }
  .hero__label { font-size: 12px; margin-bottom: 12px; }
  .hero__title { font-size: clamp(38px, 11.5vw, 56px); }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 18px; }
  .hero__desc { font-size: 13px; line-height: 1.85; max-width: 400px; letter-spacing: 0.01em; }
  .cta { width: 96px; height: 96px; font-size: 11px; gap: 6px; }
  .status { margin-top: 20px; }
  .status .status__opt { display: none; }
  .footer { padding: 14px var(--gutter) 16px; }
  .footer__hint { display: none; }
}

@media (max-width: 720px) and (max-height: 700px) {
  .hero__row { flex-direction: row; align-items: center; }
  .cta { width: 84px; height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-in] { transition-duration: 0.01s; transition-delay: 0s; transform: none; }
  .dot { animation: none; }
}