/* Niwa — a quiet landing page. Washi paper, sumi ink, one akane seal-red,
   Shippori Mincho (display) + Zen Kaku Gothic New (body). Minimal by intent. */

:root {
  --paper: #F2F1EA;
  --ink: #23201A;
  --ink-soft: #6B6557;
  --hair: rgba(35, 32, 26, 0.1);
  --seal: #A82C2A;
  --koi: #2B4A63;
  --kame: #A67C2E;
  --kujaku: #3E6B6E;
  --display: "Shippori Mincho", serif;
  --body: "Zen Kaku Gothic New", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* faint paper grain */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 2; }

/* the 庭 seal */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--seal);
  color: #F4EEDF;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1;
  flex: none;
}
.seal-sm { width: 26px; height: 26px; font-size: 15px; border-radius: 6px; }
.seal-lg { width: 78px; height: 78px; font-size: 47px; border-radius: 18px; box-shadow: 0 10px 30px rgba(168, 44, 42, 0.18); }

/* HERO — one quiet, full screen */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 80px 24px 40px;
}
.title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(64px, 15vw, 124px);
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 4px;
}
.tagline {
  font-size: clamp(16px, 2.6vw, 21px);
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.lead { font-size: 15.5px; color: var(--ink-soft); max-width: 380px; }

/* App Store badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding: 11px 22px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.badge:hover { transform: translateY(-2px); opacity: 0.92; }
.badge span { display: flex; flex-direction: column; line-height: 1.15; font-size: 18px; letter-spacing: 0.3px; text-align: left; }
.badge small { font-size: 10px; letter-spacing: 0.5px; opacity: 0.78; }

/* scroll cue — a quiet hairline that there is more below */
.scroll-cue {
  width: 1px;
  height: 46px;
  margin-top: 18px;
  background: linear-gradient(var(--ink-soft), transparent);
  opacity: 0.45;
}

/* THE THREE — the one visual moment */
.three {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(44px, 9vw, 96px);
  padding: 40px 24px 130px;
}
.glyph { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.g-svg { width: 116px; height: 116px; display: block; }
.g-name { font-family: var(--display); font-weight: 500; font-size: 25px; letter-spacing: 0.12em; }
.g-word { font-size: 13px; letter-spacing: 0.1em; color: var(--ink-soft); margin-top: -6px; }

/* Koi — a loop that draws itself (ink, with akane pearls) */
.koi .loop-draw {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  transition: stroke-dashoffset 2s ease;
}
.js .loop-draw { stroke-dashoffset: 1; }
.is-visible .loop-draw { stroke-dashoffset: 0; }
.koi .pearl { stroke: var(--ink); stroke-width: 3; transition: opacity 0.5s ease 1.5s; }
.js .pearl { opacity: 0; }
.koi .pearl.hollow { fill: var(--paper); }
.koi .pearl.filled { fill: var(--seal); stroke: var(--seal); }
.is-visible .pearl { opacity: 1; }

/* Kame — rectangles settle in (ink outlines, akane clues) */
.kame-rect rect { fill: rgba(35, 32, 26, 0.045); stroke: rgba(35, 32, 26, 0.42); stroke-width: 1.6; }
.kame-rect text { fill: var(--seal); font-family: var(--display); font-size: 16px; font-weight: 600; }
.kame-rect {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
  transition-delay: calc(var(--i) * 0.13s);
}
.js .kame-rect { opacity: 0; transform: scale(0.82); }
.is-visible .kame-rect { opacity: 1; transform: scale(1); }

/* Kujaku — regions bloom around their dots (ink tints, akane dots) */
.kujaku-region rect { fill: var(--ink); fill-opacity: var(--o, 0.14); }
.kujaku-region .dot { fill: var(--seal); }
.kujaku-region {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1);
  transition-delay: calc(var(--i) * 0.15s);
}
.js .kujaku-region { opacity: 0; transform: scale(0.85); }
.is-visible .kujaku-region { opacity: 1; transform: scale(1); }

/* footer */
.foot {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hair);
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.foot-links { display: flex; gap: 26px; }
.foot-links a { color: var(--seal); text-decoration: none; font-size: 15px; letter-spacing: 0.03em; }
.foot-links a:hover { text-decoration: underline; }
.foot-credit { font-size: 13px; color: var(--ink-soft); letter-spacing: 0.03em; }

/* privacy / document page */
.doc {
  position: relative;
  z-index: 2;
  max-width: 660px;
  margin: 0 auto;
  padding: 64px 24px 72px;
}
.doc-back { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); margin-bottom: 40px; }
.doc-back .seal-sm { transition: transform 0.2s; }
.doc-back:hover .seal-sm { transform: translateX(-2px); }
.doc-back span { font-family: var(--display); letter-spacing: 0.1em; }
.doc-title { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 6vw, 42px); letter-spacing: 0.06em; }
.doc-date { color: var(--ink-soft); font-size: 14px; margin: 10px 0 30px; }
.doc h2 { font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: 0.06em; margin: 36px 0 10px; }
.doc p { color: var(--ink); margin-bottom: 14px; }
.doc ul { margin: 0 0 16px 0; padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--seal); text-decoration: none; }
.doc a:hover { text-decoration: underline; }

/* reveal — hidden state gated on .js so the page still shows with JS off */
.reveal { transition: opacity 0.8s ease var(--d, 0s), translate 0.8s ease var(--d, 0s); }
.js .reveal { opacity: 0; translate: 0 16px; }
.js .reveal.is-visible { opacity: 1; translate: 0 0; }

/* responsive */
@media (max-width: 560px) {
  .three { gap: 54px; padding-bottom: 96px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, .reveal, .loop-draw, .pearl, .kame-rect, .kujaku-region { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; translate: none; }
  .loop-draw { stroke-dashoffset: 0; }
  .pearl { opacity: 1; }
  .kame-rect, .kujaku-region { opacity: 1; transform: none; }
}