/* ─────────────────────────────────────────────────
 * base.css ─ design tokens, reset, typography
 * ───────────────────────────────────────────────── */

/* ── design tokens (default; override by theme) ── */
:root {
  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* shadow */
  --shadow-1: 0 1px 2px rgba(0,0,0,.25);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,.45);
  --shadow-3: 0 20px 60px -20px rgba(0,0,0,.55);

  /* typography */
  --f-serif: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
  --f-sans: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', system-ui, sans-serif;
  --f-en: 'Fraunces', 'Cormorant Garamond', 'Times New Roman', serif;
  --f-mono: 'DM Mono', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  --f-ui: 'Inter', 'Zen Kaku Gothic New', system-ui, sans-serif;

  --fs-eyebrow: clamp(11px, 0.78vw, 13px);
  --fs-body: clamp(14px, 1vw, 16px);
  --fs-lead: clamp(15px, 1.18vw, 19px);
  --fs-h3: clamp(20px, 2vw, 28px);
  --fs-h2: clamp(28px, 4vw, 56px);
  --fs-h1: clamp(40px, 7.4vw, 96px);
  --fs-display: clamp(56px, 12vw, 168px);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.78;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.22em;

  /* layout */
  --gutter: clamp(20px, 5vw, 80px);
  --max-w: 1320px;
  --nav-h: 72px;

  /* easing */
  --e-out: cubic-bezier(.22,.61,.36,1);
  --e-in-out: cubic-bezier(.65,0,.35,1);
  --e-spring: cubic-bezier(.16,1,.3,1);
  --e-snap: cubic-bezier(.83,0,.17,1);
}

@media (max-width: 720px) {
  :root {
    --gutter: 20px;
    --nav-h: 64px;
  }
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--paper);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'palt' 1, 'pkna' 1;
  overflow-x: clip;
}

img, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--base); color: var(--paper); }

h1, h2, h3, h4 {
  font-family: var(--f-serif);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  /* 日本語の二重カーニングを抑える */
  font-feature-settings: 'palt' 1;
}

p { margin: 0; }

/* ── grain (film) ── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* ── skip link ── */
.skip-link {
  position: fixed;
  top: -40px;
  left: 12px;
  background: var(--paper);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: var(--r-md);
  z-index: 10000;
  transition: top .2s var(--e-out);
}
.skip-link:focus { top: 12px; }

/* ── buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-family: var(--f-ui);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 14px;
  border: 1px solid transparent;
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--e-spring), background-color .25s var(--e-out), color .25s var(--e-out), border-color .25s var(--e-out);
  will-change: transform;
}
.btn--lg { padding: 18px 32px; font-size: 15px; }
.btn--primary {
  background: var(--base);
  color: var(--paper);
  border-color: var(--base);
}
.btn--primary:hover { background: var(--base-strong); border-color: var(--base-strong); transform: translateY(-2px); }
.btn--ghost {
  border-color: rgba(255,255,255,.35);
  color: var(--paper);
}
.btn--ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.7); }
.btn__arrow { display: inline-block; transition: transform .35s var(--e-spring); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ── scroll progress (top hairline) ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 998;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.06), transparent);
}
.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--accent), var(--base), var(--gold));
  transition: width .1s linear;
}

/* ── reveal base ── */
[data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s var(--e-out),
    transform 1s var(--e-spring);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
[data-anim="fade-down"] { transform: translateY(-24px); }
[data-anim="fade-left"] { transform: translateX(-24px); }
[data-anim="fade-right"] { transform: translateX(24px); }
[data-anim="zoom"] { transform: scale(.94); }

[data-anim].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* split-text (one char per span) */
[data-split] .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.6em) rotateX(-30deg);
  transform-origin: 50% 100%;
  transition: opacity .7s var(--e-out), transform .9s var(--e-spring);
  transition-delay: var(--char-delay, 0ms);
}
[data-split].is-in .char { opacity: 1; transform: none; }
[data-split] .word { display: inline-block; }

/* magnetic / tilt placeholders ─ JS 側で transform を上書き */
[data-magnetic], [data-tilt] {
  transition: transform .55s var(--e-spring);
  will-change: transform;
}

/* ── utility ── */
.fluid {
  font-family: var(--f-en);
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--gutter);
}