/* ============================================================
   デザイントークンと基礎スタイル（全ページ共通）
   コンセプト: DEEP DIVE / 深海へ潜る = 技術の深層へ潜る
   ============================================================ */

/* ---------- 1. デザイントークン ---------- */
:root {
  /* 色: 海の深さで段階をつくる。パレット外の色は足さない */
  --c-abyss: #010a10;
  --c-bg: #041824;
  --c-surface: #072331;
  --c-surface-2: #0b3040;
  --c-line: rgba(182, 232, 235, 0.14);
  --c-line-strong: rgba(182, 232, 235, 0.28);

  --c-fg: #e9f6f6;
  --c-muted: #7ea7b0;
  --c-dim: #4f757f;

  /* アクセント: 光芒のシアンと、海底に散る陽光のアンバー */
  --c-accent: #3fd0c9;
  --c-accent-soft: rgba(63, 208, 201, 0.14);
  --c-warm: #ffc46b;

  /* 書体 */
  --f-display: "Montserrat", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --f-jp: "Noto Sans JP", system-ui, sans-serif;

  /* 余白 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --gutter: clamp(20px, 5vw, 64px);
  --hud-h: 64px;

  /* モーション */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.22s;
  --dur: 0.42s;
  --dur-slow: 0.8s;

  --z-scene: 0;
  --z-grain: 1;
  --z-stage: 10;
  --z-hud: 20;
  --z-panel: 40;
  --z-loader: 90;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  background: var(--c-abyss);
  color: var(--c-fg);
  font-family: var(--f-jp);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  /* 和文は既定だとほぼ任意の文字位置で折り返すため「立ち／続ける」のように
     語の途中で切れる。文節境界で折り返させる（未対応ブラウザは既定動作のまま） */
  word-break: auto-phrase;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

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

::selection {
  background: var(--c-accent);
  color: var(--c-abyss);
}


/* ---------- 共通ユーティリティ ---------- */
.mono {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--c-dim);
  text-transform: uppercase;
}

/* 画面下から静かに現れる。ページ内のリビール演出はすべてこれを使う */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ---------- 動きを抑える設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

}