@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Zen+Kaku+Gothic+New:wght@300;400;500&family=Zen+Old+Mincho:wght@400;500;600&display=swap');

/* ──────────────────────────────────────────────
   blanket — 余白に、かたちを。
   Design tokens & signature layer
   （レイアウト・余白・色・タイポは Tailwind 側で、
     ここでは署名要素とモーションのみを静かに足す）
─────────────────────────────────────────────── */

:root {
  --paper:    #FBFAF7;
  --mist:     #F2EFEA;
  --line:     #E5E1D9;
  --charcoal: #2B2926;
  --slate:    #615D56;
  --muted:    #908A80;
  --ember:    #A56F5C;
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body { background: var(--paper); color: var(--charcoal); overflow-x: hidden; }

::selection { background: rgba(165,111,92,.13); color: var(--charcoal); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; border-radius: 2px; }

/* ── Stitch : 唯一の構造モチーフ（織りの縫い目） ───────── */
.stitch { display: inline-block; width: 40px; height: 1px; background: var(--ember); opacity: .65; }

/* ── Eyebrow : セクションラベル（精度・信頼の層） ───────── */
.eyebrow {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--slate);
}

/* ── Reveal : ゆっくり立ち上がるフェード ──────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.15s cubic-bezier(.22,.61,.21,1), transform 1.15s cubic-bezier(.22,.61,.21,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ── 呼吸する一点（Hero のスクロールヒント） ──────────── */
@keyframes breath {
  0%, 100% { opacity: .28; transform: translateY(0); }
  50%      { opacity: .62; transform: translateY(5px); }
}
.breath { animation: breath 6.5s ease-in-out infinite; }

/* ── Navigation ─────────────────────────────────────── */
[data-nav] {
  transition: background-color .5s ease, backdrop-filter .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}
[data-nav].is-scrolled {
  background: rgba(251,250,247,.74);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom-color: var(--line);
}
.navlink { position: relative; }
.navlink::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -5px;
  height: 1px; background: var(--ember);
  transition: right .45s cubic-bezier(.22,.61,.21,1);
}
.navlink:hover::after,
.navlink[aria-current="true"]::after { right: 0; }
.navlink[aria-current="true"] { color: var(--charcoal); }

/* ── Mobile menu (minimal overlay) ──────────────────── */
[data-menu] {
  position: fixed; inset: 0; z-index: 40;
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: center; gap: 1.75rem;
  padding: 2.5rem;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
[data-menu].is-open { opacity: 1; transform: none; pointer-events: auto; }

/* ── Works card ─────────────────────────────────────── */
.work .visual { transition: transform 1.4s cubic-bezier(.22,.61,.21,1); }
.work:hover .visual { transform: scale(1.035); }
.work .cat { transition: color .5s ease, letter-spacing .5s ease; }
.work:hover .cat { color: var(--ember); letter-spacing: .26em; }
.work .more { opacity: 0; transform: translateX(-6px); transition: opacity .5s ease, transform .5s ease; }
.work:hover .more { opacity: 1; transform: none; }

/* ── Contact form : 罫線を主張させない最小限の入力 ──────── */
.field {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  padding: .85rem .25rem;
  color: var(--charcoal);
  font-family: "Zen Old Mincho", serif; font-size: 1rem;
  transition: border-color .45s ease;
}
.field::placeholder { color: var(--muted); }
.field:focus { outline: none; border-bottom-color: var(--ember); }
textarea.field { resize: vertical; min-height: 7rem; line-height: 1.9; }

.send { position: relative; }
.send .stitch { transition: width .45s cubic-bezier(.22,.61,.21,1), background-color .45s ease; }
.send:hover .stitch { width: 64px; }
.send:hover { color: var(--ember); }

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .breath { animation: none !important; }
  .work .visual, .work:hover .visual { transition: none; transform: none; }
}