/* =====================================================================
   base.css — リセット / タイポ / レイアウト primitives / a11y ユーティリティ
   ---------------------------------------------------------------------
   案件流用時は原則このファイルを触らない。色は tokens.css の変数のみ参照。
   3D 演出の進捗変数（--p 等）の @property 登録と共通キーフレームもここに置く。
   ===================================================================== */

/* ---- 進捗変数の型登録 -------------------------------------------------
   --p  : スクロール進捗 0..1（Scroll-driven Animations か engine.js が供給）
   --mx / --my : マウス位置 -1..1（engine.js が供給。JS 無効時は 0 のまま）
   --hov: ホバー時のせり出し量（transition 可能にするため型登録）
------------------------------------------------------------------------ */
@property --p  { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --mx { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --my { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --hov{ syntax: "<length>"; inherits: false; initial-value: 0px; }

/* 共通キーフレーム: --p を 0→1 に進めるだけ。
   すべてのスクロール連動演出はこの 1 本をタイムライン違いで再利用する */
@keyframes kf-progress { from { --p: 0; } to { --p: 1; } }

/* ---- リセット ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html{
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body{
  overflow-x: clip;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "palt";
}
img, svg, video { max-width: 100%; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button{
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
address { font-style: normal; }
::selection{ background: var(--c-accent); color: var(--c-bg); }

/* ---- レイアウト primitives ---- */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* セクション上下の呼吸。品質仕様の下限 clamp(72px,10vw,160px) を満たす */
.section{ position: relative; padding-block: clamp(88px, 10vw, 160px); }
@media (max-width: 720px){
  .section{ padding-block: clamp(80px, 12vw, 104px); }
}

/* ---- 見出し・テキスト ---- */
h1, h2, h3{
  font-family: var(--ff-serif);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-tight-ja);
}
.kicker{
  font-family: var(--ff-eyebrow);
  font-size: var(--fs-small);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}
.section__lead{
  color: var(--c-ink-muted);
  max-width: 40em;
  margin-top: var(--sp-6);
}

/* ---- ボタン（タップ領域 44px 以上） ---- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  padding: var(--sp-2) var(--sp-6);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  letter-spacing: .1em;
  transition: border-color var(--dur-fast) var(--ease-in-out),
              background-color var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out);
}
.btn:hover{ border-color: var(--c-accent); color: var(--c-accent-2); }
.btn--solid{
  background: var(--c-accent); color: var(--c-bg); border-color: var(--c-accent);
}
.btn--solid:hover{ background: var(--c-accent-2); border-color: var(--c-accent-2); color: var(--c-bg); }

/* ---- a11y ユーティリティ ---- */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link{
  position: fixed; top: var(--sp-3); left: var(--sp-3);
  z-index: calc(var(--z-header) + 10);
  background: var(--c-accent); color: var(--c-bg);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius);
  transform: translateY(-300%);
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.skip-link:focus-visible, .skip-link:focus{ transform: translateY(0); }

:focus-visible{
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* ---- 出現アニメ（reveal.js が .is-in を付与） ------------------------
   JS 無効時に本文が隠れないよう、初期の非表示状態は html.js の時だけ適用 */
html.js [data-reveal="fade"]{
  opacity: 0; transform: translateY(24px);
}
html.js [data-reveal="fade"].is-in{
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.js [data-reveal="lines"] .line__in{ transform: translateY(112%); }
html.js [data-reveal="lines"].is-in .line__in{
  transform: translateY(0);
  transition: transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.line{ display: block; overflow: hidden; }
.line__in{ display: inline-block; }

/* ---- prefers-reduced-motion: 全モーション停止 ------------------------
   ・時間ベースの CSS アニメ / トランジションを実質無効化
   ・スクロール連動（--p 供給アニメ）は sections.css 側で静止値に固定する */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  html.js [data-reveal="fade"],
  html.js [data-reveal="lines"] .line__in{
    opacity: 1 !important; transform: none !important;
  }
}