/* ============================================================
   sections.css — セクション固有スタイル
   背面に position:fixed の WebGL canvas が敷かれ、HTML コンテンツが
   その上をスクロールする構成。動く背景上のテキストは必ずスクリム
   （--c-scrim 系トークン）でコントラストを担保する。
   ============================================================ */

/* --- 背面キャンバス & CSS フォールバック --- */
.gl-canvas{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-2;
  background:var(--c-bg);
}
/* WebGL 不可時の静的フォールバック（body.no-webgl で表示） */
.bg-fallback{
  position:fixed; inset:0; z-index:-1;
  display:none;
  background:
    radial-gradient(120% 90% at 70% 20%,
      color-mix(in srgb, var(--c-accent-2) 22%, transparent), transparent 60%),
    radial-gradient(90% 80% at 20% 85%,
      color-mix(in srgb, var(--c-accent) 14%, transparent), transparent 55%),
    linear-gradient(var(--c-bg), var(--c-surface));
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .bg-fallback{
    background:linear-gradient(160deg, var(--c-surface-2), var(--c-bg) 60%);
  }
}
.no-webgl .bg-fallback{ display:block; }
.no-webgl .bg-fallback::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    to bottom, transparent 0 3px, var(--c-line) 3px 4px);
  opacity:.35;
}

/* --- スクロール進捗バー（装飾・aria-hidden） --- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:calc(var(--z-header) + 1);
  pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
  transform:scaleX(0);
  transform-origin:0 50%;
}

/* --- ヘッダー --- */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:var(--z-header);
  transition:background var(--dur-base) var(--ease-in-out),
             border-color var(--dur-base) var(--ease-in-out);
  border-bottom:1px solid transparent;
}
/* 最上部（.is-scrolled 前）でも動く背景からヘッダー文字を守る
   常時の薄い上端スクリム */
.site-header::before{
  content:"";
  position:absolute; inset:0 0 -28px;
  background:linear-gradient(to bottom, var(--c-scrim), transparent);
  pointer-events:none;
  z-index:-1;
}
.site-header.is-scrolled{
  background:var(--c-glass);
  border-bottom-color:var(--c-line);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .site-header.is-scrolled{
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    backdrop-filter:blur(14px) saturate(1.3);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header.is-scrolled{ background:var(--c-surface); }
}
.header-inner{
  display:flex; align-items:center; gap:var(--sp-8);
  min-height:72px;
}
.brand{
  font-family:var(--ff-brand);
  font-size:1.25rem; font-weight:700;
  letter-spacing:var(--tr-wide);
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:44px;
}
.brand-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--c-accent);
  animation:pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.72); }
}
.site-nav{ margin-left:auto; }
.nav-list{ display:flex; gap:var(--sp-2); }
.nav-list a{
  display:inline-flex; align-items:center;
  min-height:44px; padding-inline:var(--sp-4);
  font-family:var(--ff-mono);
  font-size:var(--fs-small);
  letter-spacing:var(--tr-wide);
  color:var(--c-ink-muted);
  transition:color var(--dur-fast) var(--ease-in-out);
}
.nav-list a:hover{ color:var(--c-accent); }
.header-cta{ padding-block:var(--sp-2); }
.nav-toggle{ display:none; }

/* モバイルナビ（JS 有効時のみパネル化。JS 無効時は非表示のまま
   本文アンカーはページ内スクロールで到達可能） */
@media (max-width: 859px){
  .header-cta{ display:none; }
  .nav-toggle{
    position:relative;
    display:inline-flex; flex-direction:column;
    align-items:center; justify-content:center; gap:6px;
    width:44px; height:44px;
    margin-left:auto;
    border:1px solid var(--c-glass-line);
    border-radius:var(--radius);
    z-index:calc(var(--z-header) + 2);
  }
  .nav-toggle-line{
    width:18px; height:2px; background:var(--c-ink);
    transition:transform var(--dur-fast) var(--ease-in-out),
               opacity var(--dur-fast) var(--ease-in-out);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1){
    transform:translateY(4px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2){
    transform:translateY(-4px) rotate(-45deg);
  }
  .site-nav{ margin-left:0; }
  .js .site-nav{
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--c-scrim-strong);
    visibility:hidden; opacity:0;
    transition:opacity var(--dur-base) var(--ease-out-expo),
               visibility 0s linear var(--dur-base);
    z-index:calc(var(--z-header) + 1);
  }
  .js .site-nav.is-open{
    visibility:visible; opacity:1;
    transition:opacity var(--dur-base) var(--ease-out-expo);
  }
  .js .nav-list{
    flex-direction:column; align-items:center; gap:var(--sp-6);
  }
  .js .nav-list a{ font-size:var(--fs-h3); }
  /* JS 無効時: パネル化せずヘッダー内で折り返し表示 */
  html:not(.js) .nav-list{ flex-wrap:wrap; justify-content:flex-end; }
}

/* --- HERO --- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:var(--sp-32) var(--sp-24);
}
.hero::before{ /* 動く背景の上のテキスト保護スクリム（縦＋横の二枚重ね）
   横方向は見出しが載る左 62% を確実に沈め、3D の縁光が字面を切らないようにする */
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--c-bg) 92%, transparent) 0%,
      color-mix(in srgb, var(--c-bg) 80%, transparent) 34%,
      color-mix(in srgb, var(--c-bg) 44%, transparent) 62%,
      transparent 84%),
    linear-gradient(
      to top, var(--c-scrim-strong) 0%, var(--c-scrim) 45%, transparent 85%);
  pointer-events:none;
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .hero::before{
    background:linear-gradient(
      to top, var(--c-scrim-strong) 0%, var(--c-scrim) 45%, transparent 85%);
  }
}
.hero .container{ position:relative; }
.hero-title{
  font-size:var(--fs-display);
  line-height:var(--lh-tight-ja);
  letter-spacing:var(--tr-tight-ja);
  margin-bottom:var(--sp-8);
  max-width:12em;
}
.hero-title .accent{ color:var(--c-accent); }
.hero-lead{ margin-bottom:var(--sp-12); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.hero-meta{
  margin-top:var(--sp-16);
  display:flex; flex-wrap:wrap; gap:var(--sp-8);
  font-family:var(--ff-mono);
  font-size:var(--fs-small);
  letter-spacing:var(--tr-wide);
  color:var(--c-ink-muted);
}
.scroll-cue{
  position:absolute;
  right:var(--gutter); bottom:var(--sp-12);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  font-family:var(--ff-mono); font-size:var(--fs-small);
  letter-spacing:var(--tr-wide);
  color:var(--c-ink-muted);
  writing-mode:vertical-rl;
}
.scroll-cue::after{
  content:"";
  width:1px; height:56px;
  background:linear-gradient(var(--c-accent), transparent);
  animation:cue-drop 2.2s var(--ease-in-out) infinite;
}
@keyframes cue-drop{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}
@media (max-width: 639px){ .scroll-cue{ display:none; } }

/* --- セクション共通の帯スクリム（動く背景上の可読性担保） --- */
.section-scrim{ position:relative; }
.section-scrim::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom, transparent, var(--c-scrim) 12%, var(--c-scrim) 88%, transparent);
  pointer-events:none;
}
.section-scrim > .container{ position:relative; }

/* --- VISION（スクロール連動の語りセクション） --- */
.vision-panels{
  display:flex; flex-direction:column;
  gap:clamp(var(--sp-24), 18vh, 220px);
  margin-top:var(--sp-16);
}
.vision-panel{
  min-height:62svh;
  display:flex; align-items:center;
}
.vision-card{
  max-width:520px;
  padding:clamp(var(--sp-8), 4vw, var(--sp-12));
}
.vision-panel:nth-child(2){ justify-content:flex-end; }
.vision-panel:nth-child(3){ justify-content:center; }
.vision-num{
  font-family:var(--ff-mono);
  font-size:var(--fs-small);
  letter-spacing:var(--tr-wide);
  color:var(--c-accent);
  display:block;
  margin-bottom:var(--sp-4);
}
.vision-card h3{
  font-size:var(--fs-h2);
  margin-bottom:var(--sp-6);
}
.vision-card p{ color:var(--c-ink-muted); }

/* --- WORKS --- */
.works-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap:var(--sp-6);
  margin-top:var(--sp-16);
}
.work-card{
  padding:var(--sp-8);
  display:flex; flex-direction:column; gap:var(--sp-4);
  transition:border-color var(--dur-base) var(--ease-out-expo),
             transform var(--dur-base) var(--ease-out-expo);
}
.work-card:hover{
  border-color:var(--c-accent);
  transform:translateY(-4px);
}
.work-index{
  font-family:var(--ff-mono);
  font-size:var(--fs-small);
  color:var(--c-accent);
  letter-spacing:var(--tr-wide);
}
.work-card h3{ font-size:var(--fs-h3); }
.work-cat{
  font-size:var(--fs-small);
  color:var(--c-ink-muted);
  letter-spacing:.08em;
}
.work-card p{ color:var(--c-ink-muted); font-size:var(--fs-small); flex-grow:1; }
.work-tags{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.work-tags li{
  font-family:var(--ff-mono);
  font-size:0.6875rem;
  letter-spacing:.1em;
  padding:2px var(--sp-2);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  color:var(--c-ink-muted);
}

/* --- STATEMENT --- */
.statement{ text-align:center; }
.statement-text{
  font-family:"M PLUS 1", var(--ff-sans);
  font-size:clamp(1.75rem, 4.8vw, 3.75rem);
  font-weight:900;
  line-height:1.5;
  letter-spacing:var(--tr-tight-ja);
  max-width:24em;
  margin-inline:auto;
}
.statement-text .accent{
  background:linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
@supports not (background-clip: text){
  .statement-text .accent{ color:var(--c-accent); }
}
.statement-sub{
  margin-top:var(--sp-8);
  color:var(--c-ink-muted);
  font-family:var(--ff-mono);
  font-size:var(--fs-small);
  letter-spacing:var(--tr-wide);
}

/* --- CONTACT --- */
.contact-box{
  padding:clamp(var(--sp-12), 6vw, var(--sp-24));
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-12);
}
@media (min-width: 860px){
  .contact-box{ grid-template-columns:1.2fr .8fr; align-items:center; }
}
.contact-box h2{ font-size:var(--fs-h1); margin-bottom:var(--sp-6); }
.contact-box .lead{ margin-bottom:var(--sp-8); }
.contact-mail{
  font-family:var(--ff-mono);
  font-size:var(--fs-h3);
  color:var(--c-accent);
  word-break:break-all;
  display:inline-flex; align-items:center; min-height:44px;
}
.contact-mail:hover{ text-decoration:underline; }
.contact-info{
  display:flex; flex-direction:column; gap:var(--sp-6);
  font-style:normal;
  color:var(--c-ink-muted);
  font-size:var(--fs-small);
}
.contact-info dt{
  font-family:var(--ff-mono);
  letter-spacing:var(--tr-wide);
  color:var(--c-accent);
  margin-bottom:var(--sp-1);
}

/* --- フッター --- */
.site-footer{
  position:relative;
  border-top:1px solid var(--c-line);
  padding-block:var(--sp-12);
  background:var(--c-scrim-strong);
}
.footer-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-8);
}
.footer-nav ul{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.footer-nav a{
  display:inline-flex; align-items:center;
  min-height:44px; padding-inline:var(--sp-3);
  font-family:var(--ff-mono);
  font-size:var(--fs-small);
  letter-spacing:var(--tr-wide);
  color:var(--c-ink-muted);
}
.footer-nav a:hover{ color:var(--c-accent); }
.footer-copy{
  margin-left:auto;
  font-size:var(--fs-small);
  color:var(--c-ink-muted);
}
@media (max-width: 639px){
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-copy{ margin-left:0; }
}

/* ──────────────────────────────────────────────────────────────
   和文タイポグラフィ調整
   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; }
}


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