/* ============================================================
   mocha — tokens.css
   まいにちを、ひとくちずつ。
   Manga-panel halftone design foundation (shared by every page).
   Palette: milk-foam paper / espresso ink / cafe-au-lait screen /
   nari surface / one pop strawberry accent.
   Type: Bagel Fat One (latin logotype+numbers), Reggae One (JP
   headline + SFX), Zen Kaku Gothic New (JP body).
   ============================================================ */

/* ---------- a. DESIGN TOKENS ---------- */
:root {
  /* raw named palette */
  --milk-foam:    #F7F1E4;
  --espresso:     #1C1712;
  --cafe-au-lait: #C9B8A0;
  --nari:         #EFE5D2;
  --strawberry:   #FF4D6D;

  /* role tokens (use these everywhere) */
  --color-bg:      var(--milk-foam);
  --color-ink:     var(--espresso);
  --color-fg:      var(--espresso);
  --color-muted:   var(--cafe-au-lait);
  --color-surface: var(--nari);
  --color-accent:  var(--strawberry);

  /* structural derivatives */
  --hairline: color-mix(in srgb, var(--color-ink) 15%, transparent);
  --dot-ink:  var(--color-ink);
  --dot-screen: color-mix(in srgb, var(--color-ink) 55%, transparent);

  /* fluid type scale (all capped) */
  --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.3rem, 1.08rem + 0.9vw, 1.9rem);
  --step-2:  clamp(1.9rem, 1.4rem + 2.1vw, 3.1rem);
  --step-3:  clamp(2.7rem, 1.8rem + 4.2vw, 5.4rem);
  --step-4:  clamp(3.4rem, 2rem + 6vw, 7.6rem);
  --step-display: clamp(3.4rem, 9vw, 10.5rem);

  /* font stacks */
  --font-display: 'Bagel Fat One', 'Reggae One', system-ui, sans-serif;
  --font-sfx:     'Reggae One', 'Bagel Fat One', system-ui, sans-serif;
  --font-body:    'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', sans-serif;

  /* spacing scale (fluid) */
  --space-1: clamp(0.5rem, 0.42rem + 0.3vw, 0.75rem);
  --space-2: clamp(0.75rem, 0.6rem + 0.5vw, 1.15rem);
  --space-3: clamp(1.1rem, 0.9rem + 0.8vw, 1.75rem);
  --space-4: clamp(1.6rem, 1.2rem + 1.4vw, 2.75rem);
  --space-5: clamp(2.4rem, 1.8rem + 2.4vw, 4.5rem);
  --space-6: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --space-7: clamp(5rem, 3.5rem + 6vw, 11rem);
  --space-8: clamp(8rem, 5rem + 12vw, 20rem);

  --gutter:      clamp(1rem, 0.6rem + 1.6vw, 2.4rem);
  --page-inline: clamp(1.25rem, 5vw, 6rem);
  --shell-max:   1900px;

  /* motion tokens */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart:cubic-bezier(0.76, 0, 0.24, 1);
  --ease-back:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 0.4s;
  --dur-2: 0.9s;
  --dur-3: 1.4s;
}

/* ---------- b. MODERN RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100svh; overflow-x: clip; }
img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
:where(a) { color: inherit; }

/* ---------- c. BASE ELEMENTS ---------- */
html { scroll-behavior: auto; }
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.95;
  font-feature-settings: 'palt' 0;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
}

p { max-width: 62ch; }

h1, h2, h3, h4 {
  font-family: var(--font-sfx);
  font-weight: 400;
  line-height: 1.02;
  font-feature-settings: 'palt' 1;
  letter-spacing: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

strong, b { font-weight: 700; }
.u-heavy { font-weight: 900; }

/* logotype + numerals ride the round display face */
.wordmark, .logo, .num {
  font-family: var(--font-display);
  font-feature-settings: 'palt' 1;
  letter-spacing: -0.02em;
  line-height: 0.85;
}
.num { font-variant-numeric: tabular-nums; }

/* small all-caps meta labels */
.label {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--step--1);
  line-height: 1.3;
}

/* the designed underline: draws in from the left */
a:not(.plain):not(.btn):not(.wordmark) {
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 0.12em;
  transition: background-size var(--dur-1) var(--ease-out-expo);
}
a:not(.plain):not(.btn):not(.wordmark):hover,
a:not(.plain):not(.btn):not(.wordmark):focus-visible {
  background-size: 100% 2px;
}

/* accent selection — the two-line detail juries notice */
::selection { background: var(--color-accent); color: var(--color-bg); }

/* designed focus */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* themed thin scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--color-muted) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-muted);
  border: 2px solid var(--color-bg);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-ink); }

/* ---------- d. GRAIN OVERLAY (no markup) ---------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 240px 240px;
  opacity: 0.06;
  mix-blend-mode: multiply;
}

/* ---------- e. UTILITIES + COMPONENTS ---------- */

/* layout shell */
.container {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--page-inline);
}
.full-bleed { width: 100%; margin-inline: 0; }
.svh { min-height: 100svh; }

/* 12-column asymmetric grid */
.u-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* comic-panel tilts + panels */
.tilt-l  { transform: rotate(-3deg); }
.tilt-l2 { transform: rotate(-6deg); }
.tilt-r  { transform: rotate(3deg); }
.tilt-r2 { transform: rotate(5.5deg); }
.panel {
  position: relative;
  background: var(--color-surface);
  border: 2px solid var(--color-ink);
  padding: var(--space-4);
}

/* hairline rule */
.hairline {
  border: 0;
  border-top: 1px solid var(--hairline);
  height: 0;
  width: 100%;
  margin: 0;
}

/* halftone / screentone fills (generative, no images) */
.halftone {
  background-color: transparent;
  background-image: radial-gradient(var(--dot-ink) 1.4px, transparent 1.7px);
  background-size: 8px 8px;
  background-position: 0 0;
}
.screentone {
  background-image: radial-gradient(var(--dot-screen) 1.3px, transparent 1.6px);
  background-size: 9px 9px;
}
.speedlines {
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    color-mix(in srgb, var(--color-ink) 8%, transparent) 0deg 0.7deg,
    transparent 0.7deg 4deg);
}

/* oversized index numbers */
.index-num {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 0.8;
  color: var(--color-ink);
  font-feature-settings: 'palt' 1;
  letter-spacing: -0.02em;
}
.index-num--meta {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/* comic SFX lettering */
.sfx {
  font-family: var(--font-sfx);
  font-weight: 400;
  line-height: 0.9;
  display: inline-block;
  transform: skewX(-6deg) rotate(-4deg);
  text-shadow: 3px 3px 0 var(--color-bg);
  -webkit-text-stroke: 2px var(--color-ink);
}
.sfx--accent { color: var(--color-accent); -webkit-text-stroke: 2px var(--color-accent); }

/* outlined ghost type + giant background words */
.outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--color-ink);
}
.ghost-word {
  font-family: var(--font-display);
  color: var(--color-ink);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}

/* speech bubbles */
.bubble {
  position: relative;
  background: var(--color-surface);
  border: 2px solid var(--color-ink);
  border-radius: 46% 46% 46% 46% / 40% 40% 60% 60%;
  padding: var(--space-4);
}
.bubble--think { border-radius: 50%; }

/* nav that stays legible over light + dark panels */
.nav-blend { mix-blend-mode: difference; color: var(--color-bg); }

/* vertical-writing accent (switches horizontal on small screens) */
.vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-feature-settings: 'palt' 1;
}

/* marquee (CSS-driven) */
.marquee { display: flex; overflow: hidden; width: 100%; }
.marquee-track {
  display: flex;
  flex: 0 0 auto;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-scroll 28s linear infinite;
}
.marquee-track > * { flex: 0 0 auto; padding-inline: var(--space-4); }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0.7em 1.4em;
  font-family: var(--font-sfx);
  font-size: var(--step-0);
  color: var(--color-bg);
  background: var(--color-ink);
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  transition: background-color var(--dur-1) var(--ease-out-expo),
              color var(--dur-1) var(--ease-out-expo);
}
.btn:hover, .btn:focus-visible { background: var(--color-accent); border-color: var(--color-accent); }
.btn--ghost { background: transparent; color: var(--color-ink); }
.btn--ghost:hover { color: var(--color-bg); }

/* form fields as bubble panels */
.field {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 2px solid var(--color-ink);
  border-radius: 18px;
  transition: box-shadow var(--dur-1) var(--ease-out-expo);
}
.field:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent);
}
textarea.field { min-height: 8rem; border-radius: 22px; resize: vertical; }

/* split-text fragment scaffolding (built by motion.js) */
.split-char-mask, .split-word { display: inline-block; overflow: hidden; vertical-align: top; }
.split-char, .split-word-inner { display: inline-block; will-change: transform; }

/* accessibility helper */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* custom cursor (halftone speech-dot + ring) */
.cursor, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
}
.cursor {
  width: 8px; height: 8px;
  background: var(--color-accent);
  z-index: 9997;
  transition: width var(--dur-1) var(--ease-out-expo), height var(--dur-1) var(--ease-out-expo);
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1.5px solid var(--color-bg);
  z-index: 9996;
  transition: width var(--dur-1) var(--ease-out-expo),
              height var(--dur-1) var(--ease-out-expo),
              border-radius var(--dur-1) var(--ease-out-expo),
              background-color var(--dur-1) var(--ease-out-expo);
}
html.cursor-hover .cursor { width: 12px; height: 12px; }
html.cursor-hover .cursor-ring {
  width: 58px; height: 58px;
  border-radius: 46% 46% 46% 46% / 38% 38% 62% 62%;
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  border-color: var(--color-accent);
}
html.has-custom-cursor { cursor: none; }
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor [data-hover] { cursor: none; }
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select { cursor: text; }
@media (pointer: coarse) {
  .cursor, .cursor-ring { display: none !important; }
  html.has-custom-cursor, html.has-custom-cursor * { cursor: auto; }
}

/* preloader (halftone ink fills to 100) */
body.is-loading { overflow: hidden; }
#preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-ink);
  color: var(--color-bg);
}
#preloader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--color-bg) 18%, transparent) 1.6px, transparent 2px);
  background-size: 10px 10px;
  opacity: 0.5;
  pointer-events: none;
}
.preloader-count {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--step-display);
  line-height: 1;
  letter-spacing: -0.03em;
}
.preloader-label {
  position: relative;
  font-family: var(--font-sfx);
  font-size: var(--step-0);
  letter-spacing: 0.12em;
  opacity: 0.75;
}

/* ---------- RESPONSIVE STAGES ---------- */
@media (min-width: 2000px) {
  :root { --gutter: clamp(2.4rem, 2vw, 3.4rem); }
}
@media (max-width: 1024px) {
  .u-grid { gap: var(--gutter); }
}
@media (max-width: 720px) {
  body { line-height: 1.9; }
  .u-grid { grid-template-columns: repeat(2, 1fr); }
  .vertical { writing-mode: horizontal-tb; text-orientation: mixed; }
  .tilt-l, .tilt-l2 { transform: rotate(-2deg); }
  .tilt-r, .tilt-r2 { transform: rotate(2deg); }
  .index-num { font-size: var(--step-3); }
}
@media (max-width: 480px) {
  .u-grid { grid-template-columns: 1fr; }
  p { max-width: none; }
}

/* ---------- f. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; transform: none !important; }
  .cursor, .cursor-ring { display: none !important; }
  html.has-custom-cursor, html.has-custom-cursor * { cursor: auto !important; }
  #preloader { display: none !important; }
  body.is-loading { overflow: auto !important; }
}