@import url("tokens.css");

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-zh);
  font-size: var(--step-md);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

body.is-dark { background: var(--black); color: var(--paper); }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-en);
  font-size: var(--step-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin: 0;
}

.shell { padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }

.btn {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--step-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1.15rem 2.5rem;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease);
}

.btn:hover { background: var(--neon); color: var(--black); border-color: var(--neon); }
.btn--solid { background: var(--neon); color: var(--black); border-color: var(--neon); }
.btn--solid:hover { background: var(--black); color: var(--neon); }

:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

/* ---- Nav ---- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
  z-index: 100;
  mix-blend-mode: difference;
  color: #fff;
  transition: background 0.4s var(--ease);
}

.nav.is-stuck {
  mix-blend-mode: normal;
  background: var(--black);
  color: var(--paper);
}

/* logo 三行：22CWM ® / 22 CENTURY WORLD'S MAGIC｜TAIWAN / Authorized Retailer。
   nav 高度跟著放寬。導覽列的 mix-blend-mode: difference 不用動，
   白字在淺色 hero 上會自己變黑字。 */
.nav__logo {
  display: grid;
  gap: 0.1rem;
  font-family: var(--font-en);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  line-height: 1.3;
}
.nav__logo-mark { font-weight: 700; font-size: var(--step-xs); }
.nav__logo-role { opacity: 0.75; }

.nav__toggle {
  font-family: var(--font-en);
  font-size: var(--step-xs);
  letter-spacing: 0.22em;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0.5rem;
}

.menu {
  position: fixed;
  inset: 0;
  background: var(--black);
  color: var(--paper);
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--gutter);
  gap: 0.5rem;
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease);
}

.menu.is-open { transform: translateY(0); }

.menu__item {
  font-family: var(--font-en);
  font-size: var(--step-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-block: 0.4rem;
  transition: color 0.3s var(--ease);
}
.menu__num { font-size: var(--step-xs); color: var(--neon); letter-spacing: 0.2em; }
.menu__zh { font-family: var(--font-zh); font-size: var(--step-sm); color: var(--grey-500); }
.menu__item:hover { color: var(--neon); }

/* ---- Footer ---- */
.footer {
  background: var(--black);
  color: var(--paper);
  padding: var(--section-y) var(--gutter) 3rem;
}
.footer__brand { font-family: var(--font-en); font-size: var(--step-xl); font-weight: 700; margin: 0 0 0.75rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block: 2.5rem; }
.footer__links a { font-family: var(--font-en); font-size: var(--step-sm); letter-spacing: 0.14em; }
.footer__links a:hover { color: var(--neon); }
.footer__meta { font-size: var(--step-xs); color: var(--grey-500); }

/* ---- 404 ---- */
.error-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  background: var(--black);
  color: var(--paper);
  padding-inline: var(--gutter);
}
.error-page__code { font-family: var(--font-en); font-size: var(--step-hero); color: var(--neon); margin: 0; }

/* ---- Scroll reveal ----
   只在 JS 可用時才隱藏（html.js 由 base.html 的 inline script 加上），
   否則 JS 載入失敗會讓整段內容永久看不見。 */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }
  html.js .reveal.is-visible { opacity: 1; transform: none; }
}