/* =====================================================================
   sections.css — KIRIHA セクション固有スタイル
   ---------------------------------------------------------------------
   色はすべて tokens.css のカスタムプロパティ参照。生の色コード禁止。
   背景 canvas は position:fixed で最背面に敷き、コンテンツ側は
   スクリム（--c-scrim / --c-scrim-strong）でコントラスト下限を担保する。
   ===================================================================== */

/* ---- 背景レイヤー -------------------------------------------------- */

/* 負の z-index は環境によって合成が不安定なため使わない。
   背景レイヤーは z-index:0、コンテンツ側（main / footer）を z-index:1 に置く */
.bg-canvas{
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

/* エンジン初期化失敗時 / JS 無効時の静的フォールバック */
.bg-fallback{
  position: fixed; inset: 0;
  z-index: 0;
  background: var(--c-bg);
  background-image: var(--grad-fallback);
  opacity: 0;
  pointer-events: none;
}
.no-engine .bg-canvas{ display: none; }
.no-engine .bg-fallback{ opacity: 1; }

main, .site-footer{
  position: relative;
  z-index: 1;
}

/* ---- ヘッダー ------------------------------------------------------ */

.site-header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  transition: background-color var(--dur-base) var(--ease-in-out),
              border-color var(--dur-base) var(--ease-in-out),
              backdrop-filter var(--dur-base) var(--ease-in-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: var(--c-header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--c-line);
}

.site-header__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
  min-height: 72px;
}

.brand{
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 44px;
  font-family: var(--ff-mono);
  font-weight: 700; font-size: 1.125rem;
  letter-spacing: var(--tr-wide);
}
.brand__mark{
  width: 10px; height: 10px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
  transform: rotate(45deg);
}

.site-nav ul{
  display: flex; align-items: center; gap: var(--sp-2);
  list-style: none; margin: 0; padding: 0;
}
.site-nav a{
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small);
  letter-spacing: .08em;
  color: var(--c-ink-muted);
}
.site-nav a:hover{ color: var(--c-accent); }
.site-nav__cta{ margin-left: var(--sp-4); }

.menu-toggle{
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 6px;
  width: 44px; height: 44px;
}
.menu-toggle__bar{
  width: 22px; height: 2px;
  background: var(--c-ink);
  transition: transform var(--dur-fast) var(--ease-in-out),
              opacity var(--dur-fast) var(--ease-in-out);
}

@media (max-width: 860px){
  .menu-toggle{ display: flex; }
  .site-nav{
    position: fixed; inset: 0;
    z-index: -1;
    display: grid; place-content: center;
    background: var(--c-scrim-strong);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-in-out),
                visibility 0s var(--dur-base);
  }
  .site-nav.is-open{
    z-index: calc(var(--z-header) - 1);
    opacity: 1; visibility: visible;
    transition: opacity var(--dur-base) var(--ease-in-out);
  }
  .site-nav ul{ flex-direction: column; gap: var(--sp-4); }
  .site-nav a{ font-size: var(--fs-h3); padding: var(--sp-3) var(--sp-8); }
  .site-nav__cta{ margin: var(--sp-8) auto 0; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2){ opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
  .menu-open{ overflow: hidden; }
}

/* ---- HERO ---------------------------------------------------------- */

.hero{
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: var(--sp-32) var(--sp-24);
}
.hero__inner{ position: relative; }
/* 動く粒の上に載る文字の下限コントラスト担保（スクリム） */
.hero__inner::before{
  content: "";
  position: absolute; inset: -12% -18%;
  background: radial-gradient(58% 62% at 38% 50%, var(--c-scrim) 0%, var(--c-scrim-0) 72%);
  pointer-events: none;
}
.hero__inner > *{ position: relative; }

.hero__title{
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 700;
  margin-block: var(--sp-4) var(--sp-8);
}
.hero__title em{
  font-style: normal;
  background: linear-gradient(100deg, var(--c-accent), var(--c-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__copy{
  max-width: 34em;
  color: var(--c-ink-muted);
  margin-bottom: var(--sp-12);
}
.hero__actions{ display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.scroll-cue{
  position: absolute; bottom: var(--sp-8); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  font-family: var(--ff-mono); font-size: var(--fs-small);
  letter-spacing: var(--tr-wide);
  color: var(--c-ink-muted);
}
.scroll-cue::after{
  content: "";
  width: 1px; height: 56px;
  background: linear-gradient(var(--c-accent), var(--c-accent-0));
  animation: cue-drop 2.2s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes cue-drop{
  0%{ transform: scaleY(0); }
  45%{ transform: scaleY(1); }
  100%{ transform: scaleY(1); opacity: 0; }
}

/* ---- PROCESS（スクロール連動モーフィング解説） --------------------- */

.process{ padding-block: 0; }
.process__head{
  padding-block: var(--sp-24) var(--sp-12);
}
.process-step{
  min-height: 92vh;
  min-height: 92svh;
  display: flex; align-items: center;
}
.process-step:nth-child(even) .process-card{ margin-left: auto; }

.process-card{
  max-width: 30rem;
  padding: var(--sp-8);
  background: var(--c-scrim);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.process-card__no{
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--tr-wide);
  color: var(--c-accent-2);
}
.process-card__title{
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  margin-block: var(--sp-3) var(--sp-4);
}
.process-card__body{ color: var(--c-ink-muted); }

/* ---- WORKS --------------------------------------------------------- */

.works{ background: var(--c-scrim-strong); }
.works__head{ margin-bottom: var(--sp-16); }
.works__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-6);
}

.work-card{
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-8);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-in-out),
              box-shadow var(--dur-base) var(--ease-in-out);
}
.work-card::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in-out);
}
.work-card:hover{
  transform: translateY(-4px);
  border-color: var(--c-accent);
  box-shadow: 0 12px 48px var(--c-accent-glow);
}
.work-card:hover::before{ opacity: 1; }

.work-card__meta{
  display: flex; justify-content: space-between; gap: var(--sp-4);
  font-family: var(--ff-mono); font-size: var(--fs-small);
  letter-spacing: .08em;
  color: var(--c-accent);
}
.work-card__year{ color: var(--c-ink-muted); }
.work-card__title{
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}
.work-card__desc{
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
  line-height: 1.9;
}

/* ---- STATEMENT ----------------------------------------------------- */

.statement{ text-align: center; }
.statement__inner{
  position: relative;
  max-width: 52rem; margin-inline: auto;
}
.statement__inner::before{
  content: "";
  position: absolute; inset: -14% -12%;
  background: radial-gradient(55% 60% at 50% 50%, var(--c-scrim) 0%, var(--c-scrim-0) 74%);
  pointer-events: none;
}
.statement__inner > *{ position: relative; }
.statement__text{
  font-size: var(--fs-h1);
  line-height: 1.4;
  letter-spacing: var(--tr-tight);
  font-weight: 700;
  margin-block: var(--sp-6);
}
.statement__text em{
  font-style: normal;
  background: linear-gradient(100deg, var(--c-accent), var(--c-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.statement__note{ color: var(--c-ink-muted); max-width: 36em; margin-inline: auto; }

/* ---- CONTACT ------------------------------------------------------- */

.contact{ background: var(--c-scrim-strong); }
.contact__panel .lead{ margin-top: var(--sp-4); }
.contact__panel{
  display: grid; gap: var(--sp-12);
  grid-template-columns: 1.2fr 1fr;
  padding: clamp(24px, 5vw, 64px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
@media (max-width: 720px){
  .contact__panel{ grid-template-columns: 1fr; }
}
.contact__mail{
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--ff-mono);
  font-size: var(--fs-h3);
  color: var(--c-accent);
  word-break: break-all;
}
.contact__mail:hover{ color: var(--c-accent-2); }
.contact__addr{
  font-style: normal;
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
  line-height: 2;
}

/* ---- FOOTER -------------------------------------------------------- */

.site-footer{
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  padding-block: var(--sp-12);
}
.site-footer__inner{
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-6);
}
.site-footer nav ul{
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  list-style: none; margin: 0; padding: 0;
}
.site-footer nav a{
  display: inline-flex; align-items: center;
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small); color: var(--c-ink-muted);
}
.site-footer__small{
  width: 100%;
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
}

/* ──────────────────────────────────────────────────────────────
   和文タイポグラフィ調整
   1. palt        … 句読点・括弧まわりの余分なアキを詰める
   2. auto-phrase … 文節単位で折り返す（「書」「く。」のような分断を防ぐ）
   3. balance     … 見出しの行長を揃え、1文字だけ落ちる行を作らない
   4. strict      … 禁則処理を厳密にし、行頭に 。 、 」 が来ないようにする
   auto-phrase / balance / pretty は非対応ブラウザでは無視されるだけで、
   崩れることはない（プログレッシブ・エンハンスメント）。
   ────────────────────────────────────────────────────────────── */
body {
  font-feature-settings: "palt" 1;
  font-kerning: normal;
  line-break: strict;
  word-break: normal;
}
h1, h2, h3, h4, h5, .kicker, dt {
  word-break: auto-phrase;
  text-wrap: balance;
}
p, li, dd, td, .note, .desc, .caption,
.lede, .lead, .statement, blockquote, figcaption {
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* 手動改行は広い画面でのみ効かせ、狭い画面では自動折り返しに任せる */
@media (max-width: 640px) {
  h1 br, h2 br, h3 br,
  .lede br, .lead br, .statement br { display: none; }
}


/* ── 書体設計（見出し＝個性 / 本文＝可読性） ──────────────────────
   見出し: Murecho
   本文  : BIZ UDPGothic（Google Fonts の和文で palt が効く数少ない書体。
           読点のあとのアキが締まり、Mac / Windows で見え方が揃う）
   欧文は先頭に置いた書体から取り、和文だけが差し替わる。 */
h1, h2, h3, h4, .lede, .lead, .kicker, .statement, blockquote {
  font-family: "Murecho", sans-serif;
}
p, li, dd, td, .note, .desc, .caption, figcaption, small {
  font-family: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
}