/* ═══════════════════════════════════════════
   BASE.CSS — Design tokens, reset, layout,
   global animations. Loaded on every page.
═══════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  --ink:        #090806;
  --ink-2:      #111009;
  --ink-3:      #1b1810;
  --cream:      #EDE5D8;
  --cream-d:    rgba(237,229,216,0.55);
  --cream-m:    rgba(237,229,216,0.32);
  --ember:      #E5361A;
  --ember-a:    rgba(229,54,26,0.18);
  --gold:       #C4903A;
  --gold-l:     rgba(196,144,58,0.22);
  --paper:      #F5EFE6;
  --paper-2:    #E8DDD0;
  --dark-text:  #1A160F;

  --disp: 'Bebas Neue', Impact, sans-serif;
  --ser:  'Noto Serif TC', serif;
  --san:  'Noto Sans TC', -apple-system, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.76, 0, 0.24, 1);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--san);
  font-size: 16px;
  line-height: 1.7;
  color: var(--cream);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a   { text-decoration: none; }
s   { text-decoration: line-through; opacity: 0.45; font-style: normal; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}

section { padding: 100px 0; }

/* ── Film grain overlay ──────────────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: grain-anim 0.5s steps(1) infinite;
}
@keyframes grain-anim {
  0%  { transform: translate(0,0); }
  25% { transform: translate(-4%,-3%); }
  50% { transform: translate(2%, 4%); }
  75% { transform: translate(-2%, 1%); }
}

/* ── Scroll reveal ───────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for specific repeated components */
.pain-item:nth-child(1) { transition-delay: 0s;    }
.pain-item:nth-child(2) { transition-delay: 0.12s; }
.pain-item:nth-child(3) { transition-delay: 0.24s; }

.step:nth-child(1) { transition-delay: 0s;    }
.step:nth-child(2) { transition-delay: 0.12s; }
.step:nth-child(3) { transition-delay: 0.24s; }

.faq-item:nth-child(1) { transition-delay: 0s;    }
.faq-item:nth-child(2) { transition-delay: 0.07s; }
.faq-item:nth-child(3) { transition-delay: 0.14s; }
.faq-item:nth-child(4) { transition-delay: 0.21s; }
.faq-item:nth-child(5) { transition-delay: 0.28s; }

/* ── Hero page-load animations ───────────────────────────────────────────── */
.fi-1,.fi-2,.fi-3,.fi-4,.fi-5,.fi-6,.fi-7,.fi-8 {
  opacity: 0;
  transform: translateY(22px);
  animation: fi-up 0.9s var(--ease-out) forwards;
}
.fi-1 { animation-delay: 0.08s; }
.fi-2 { animation-delay: 0.2s;  }
.fi-3 { animation-delay: 0.34s; }
.fi-4 { animation-delay: 0.48s; }
.fi-5 { animation-delay: 0.12s; }
.fi-6 { animation-delay: 0.62s; }
.fi-7 { animation-delay: 0.72s; }
.fi-8 { animation-delay: 0.82s; }
@keyframes fi-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Section typography utils ────────────────────────────────────────────── */
.sec-hd { margin-bottom: 64px; text-align: center; }

.sec-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.sec-label.dark { color: var(--gold); }

.sec-title {
  font-family: var(--ser);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.2;
  color: var(--cream);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.sec-title.dark { color: var(--dark-text); }

.sec-sub {
  font-size: 1rem;
  color: var(--cream-d);
  margin-top: 8px;
}
.sec-sub.dark { color: rgba(26,22,15,0.5); }