/* ============================================================
   base.css — リセット / タイポ / レイアウト primitives / a11y
   案件流用時、原則このファイルは触らない（色は全て tokens.css の
   変数参照。文言・演出は index.html / config.js 側）。
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
}
body{
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--ff-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  overflow-x:clip;
  min-height:100vh;
}

img,svg,canvas{ display:block; max-width:100%; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{
  font:inherit; color:inherit; background:none; border:0; cursor:pointer;
}

/* --- フォーカスリング（消さない） --- */
:focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:2px;
  border-radius:var(--radius);
}

/* --- スキップリンク（フォーカス時のみ可視） --- */
.skip-link{
  position:fixed; top:var(--sp-2); left:var(--sp-2);
  z-index:calc(var(--z-header) + 10);
  padding:var(--sp-3) var(--sp-6);
  background:var(--c-surface);
  color:var(--c-ink);
  border:1px solid var(--c-accent);
  border-radius:var(--radius);
  transform:translateY(-200%);
}
.skip-link:focus-visible{ transform:none; }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* --- レイアウト 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);
}

/* --- タイポ primitives --- */
h1,h2,h3{ line-height:var(--lh-heading); letter-spacing:var(--tr-tight-ja); font-weight:700; }
.eyebrow{
  font-family:var(--ff-mono);
  font-size:var(--fs-small);
  letter-spacing:var(--tr-wide);
  text-transform:uppercase;
  color:var(--c-accent);
  display:flex; align-items:center; gap:var(--sp-3);
  margin-bottom:var(--sp-6);
}
.eyebrow::before{
  content:""; width:32px; height:1px; background:var(--c-accent);
}
.lead{ color:var(--c-ink-muted); max-width:38em; }
.mono{ font-family:var(--ff-mono); }

/* --- ボタン --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--sp-2);
  min-height:44px; min-width:44px;
  padding:var(--sp-3) var(--sp-8);
  font-size:var(--fs-body); font-weight:600;
  letter-spacing:.04em;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  transition:background var(--dur-fast) var(--ease-in-out),
             border-color var(--dur-fast) var(--ease-in-out),
             color var(--dur-fast) var(--ease-in-out);
}
.btn-cta{
  background:var(--c-accent);
  border-color:var(--c-accent);
  color:var(--c-accent-ink);
}
.btn-cta:hover{ background:var(--c-accent-2-deep); border-color:var(--c-accent-2-deep); color:var(--c-ink); }
.btn-ghost{ border-color:var(--c-glass-line); }
.btn-ghost:hover{ border-color:var(--c-accent); color:var(--c-accent); }

/* --- ガラスモーフィズム（backdrop-filter 非対応時は不透明面に） --- */
.glass{
  background:var(--c-surface);
  border:1px solid var(--c-glass-line);
  border-radius:var(--radius);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .glass{
    background:var(--c-glass);
    -webkit-backdrop-filter:blur(16px) saturate(1.3);
    backdrop-filter:blur(16px) saturate(1.3);
  }
}

/* --- 出現アニメ（reveal.js が .is-inview を付与） ---
   .js が無い（JS 無効）環境では最初から可視のまま。 */
.js [data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity var(--dur-reveal) var(--ease-out-expo),
    transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay:var(--reveal-delay, 0s);
}
.js [data-reveal].is-inview{
  opacity:1;
  transform:none;
}

/* --- reduced motion: アニメ実質無効化。内容は全部読める --- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
}