/* =====================================================================
   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;
}
/* 最上部（.is-scrolled 前）でも動く粒からナビ文字を守る常時スクリム */
.site-header::before{
  content: "";
  position: absolute; inset: 0 0 -32px;
  background: linear-gradient(to bottom, var(--c-scrim-strong), var(--c-scrim-0));
  pointer-events: none;
  z-index: -1;
}
.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;
}

/* ロゴタイプは読み込み済みの Murecho を明示（OS 既定の等幅に落とさない） */
.brand{
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 44px;
  font-family: "Murecho", var(--ff-sans);
  font-weight: 900; 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-strong); }
/* .site-nav a（0,1,1）が .btn--primary（0,1,0）に勝って文字色を奪っていた。
   ベタ面ボタンの文字色をここで確定させる（背景比 8.1:1） */
.site-nav a.btn--primary,
.site-nav a.btn--primary:hover{ color: var(--c-bg); }
.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{
  position: relative;   /* .scroll-cue の基準。無いと main を基準にしてページ末尾へ落ちる */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: var(--sp-32) var(--sp-24);
  /* スクリムの擬似要素が画面幅を超えるのを止める（横スクロールの芽） */
  overflow: clip;
}
.hero__inner{ position: relative; }
/* 動く粒の上に載る文字の下限コントラスト担保（スクリム）。
   見出し・リード・CTA が載る左 60% を確実に沈める */
.hero__inner::before{
  content: "";
  position: absolute; inset: -14% -14%;
  background:
    radial-gradient(64% 70% at 32% 50%, var(--c-scrim-strong) 0%,
      var(--c-scrim) 44%, var(--c-scrim-0) 76%);
  pointer-events: none;
}
.hero__inner > *{ position: relative; }

.hero__title{
  font-size: var(--fs-display);
  line-height: var(--lh-tight-ja);
  letter-spacing: var(--tr-tight-ja);
  font-weight: 700;
  margin-block: var(--sp-4) var(--sp-8);
}
/* 差し色はアンバー単色 1 色に絞る（紫→橙のグラデ文字は既視感が強く品位を下げる）。
   グラデーションは .work-card::before の 2px ラインにだけ残す */
.hero__title em{
  font-style: normal;
  color: var(--c-accent-2);
}
.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-h2-sub);
  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); }
/* 4 件を 2 列で組む。3 列だと 4 枚目が単独で残り、右半分が空く
   （16:9 のビジュアル枠を大きく見せる意図も兼ねる） */
.works__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(var(--sp-6), 2.4vw, var(--sp-12));
}

.work-card{
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: 0 0 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; }

/* 作品ビジュアル枠。実素材（スチル / 動画）が入るまでは CSS で
   「光の扱い」を示すアブストラクトを置く。差し替え時は background だけ外す */
.work-card__media{
  position: relative;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(160deg, var(--c-surface-2), var(--c-bg));
  overflow: hidden;
}
.work-card__media::after{
  /* 粒状のフィルムノイズ（1 レイヤーだけ。重ねすぎない） */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--c-line) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  opacity: .55;
  mix-blend-mode: overlay;
}
.work-card__media--1{ /* 硝子の街: 窓からの斜光 */
  background:
    linear-gradient(112deg, var(--c-scrim-0) 34%, var(--c-amber-soft) 40%,
      var(--c-accent-2-0) 46%),
    linear-gradient(112deg, var(--c-scrim-0) 52%, var(--c-amber-soft) 56%,
      var(--c-accent-2-0) 61%),
    linear-gradient(165deg, var(--c-surface-2), var(--c-bg) 78%);
}
.work-card__media--2{ /* 渦潮: 螺旋のリング */
  background:
    repeating-radial-gradient(circle at 58% 52%,
      var(--c-accent-soft) 0 1px, var(--c-scrim-0) 1px 17px),
    radial-gradient(48% 60% at 58% 52%, var(--c-accent-glow), var(--c-accent-0) 72%),
    linear-gradient(200deg, var(--c-surface-2), var(--c-bg) 82%);
}
.work-card__media--3{ /* 港の手: 逆光の水平線 */
  background:
    linear-gradient(to top, var(--c-bg) 42%, var(--c-scrim-0) 43%),
    radial-gradient(70% 46% at 50% 62%, var(--c-amber-soft), var(--c-accent-2-0) 70%),
    linear-gradient(var(--c-surface-2), var(--c-bg));
}
.work-card__media--4{ /* 灯: 闇のなかの提灯 */
  background:
    radial-gradient(11% 15% at 68% 44%, var(--c-accent-2), var(--c-accent-2-0) 74%),
    radial-gradient(52% 62% at 68% 44%, var(--c-amber-soft), var(--c-accent-2-0) 78%),
    linear-gradient(150deg, var(--c-bg), #000 92%);
}
.work-card__dur{
  position: absolute; right: var(--sp-3); bottom: var(--sp-3);
  z-index: 1;
  padding: 2px 8px;
  background: var(--c-scrim-strong);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font-family: var(--ff-mono); font-size: .75rem;
  letter-spacing: .08em; color: var(--c-ink);
}
.work-card__meta,
.work-card__title,
.work-card__desc{ padding-inline: var(--sp-8); }
.work-card__meta{
  margin-top: var(--sp-6);
  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-strong);
}
.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-body);
  line-height: 1.95;
}

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

.statement{ text-align: center; overflow: clip; }
.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.35;
  letter-spacing: var(--tr-tight-ja);
  font-weight: 700;
  margin-block: var(--sp-6);
}
.statement__text em{
  font-style: normal;
  color: var(--c-accent-2);
}
.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-strong);
  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;
}