/*
 * Another Gate コーポレートサイト（宇宙テーマ・シングルページ）
 * 値は Claude Design の「Another Gate v3.dc.html」と引き継ぎ README（Design Tokens）に一致させている。
 * 色・余白を変える場合は README 側の仕様と食い違わないよう注意。
 */
:root {
  --ac: #00D4E8;          /* アクセント（ロゴのシアン） */
  --bg: #050814;
  --text: #E8EEFF;
  --text-body: #B9C1DA;
  --text-sub: #8A93B0;
  --rule-strong: rgba(232, 238, 255, 0.25);
  --rule-soft: rgba(232, 238, 255, 0.12);
  --font-jp: 'Zen Kaku Gothic New', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

html, body { margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--ac); }
::selection { background: var(--ac); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.page {
  position: relative;
  min-height: 100vh;
  background: radial-gradient(120% 80% at 75% 20%, #0B1638 0%, #050814 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-jp);
}

/* ---------- 背景（Three.js 描画面・暗幕・テレメトリ） ---------- */
.space { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.space-gl { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s; }
.space-gl canvas { width: 100%; height: 100%; display: block; }
/* 暗幕の濃さは scene.js の resize() が画面幅で切り替える（≥960px は左側のみ、未満は全面） */
.space-veil { position: absolute; inset: 0; }
.space-readout {
  position: absolute; right: 4vw; bottom: 28px; display: none; gap: 24px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--text-sub);
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(20px, 3vw, 40px);
  background: linear-gradient(#050814 0%, rgba(5, 8, 20, 0.6) 70%, rgba(5, 8, 20, 0) 100%);
}
.site-header .logo { display: flex; align-items: center; }
.site-header .logo img { height: 26px; width: auto; display: block; }
.site-nav {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
}
.nav-cta { padding: 10px 18px; border: 1px solid var(--ac); color: var(--ac); border-radius: 999px; }
.nav-cta:hover { background: var(--ac); color: var(--bg); }
@media (max-width: 959px) { .nav-link { display: none; } }

/* ---------- 本文レイアウト ---------- */
/* 960px 以上は左半分、未満は全幅。max() の calc は「960px 未満で巨大値になり 100% が効く」ための切替（メディアクエリ不使用） */
main {
  position: relative; z-index: 1; width: 100%;
  max-width: max(50vw, calc((960px - 100vw) * 1000));
  padding: 0 clamp(20px, 4vw, 64px);
}
section { padding: 160px 0; }

.section-label {
  display: flex; align-items: center; gap: 12px; margin-bottom: 40px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
}
.section-label .num { color: var(--ac); }
.section-label .line { width: 32px; height: 1px; background: rgba(232, 238, 255, 0.4); }

.h2 { margin: 0; font-weight: 900; font-size: clamp(30px, 3.6vw, 56px); line-height: 1.35; text-wrap: pretty; }
.mono-cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--text-sub); }
.body-text { color: var(--text-body); text-wrap: pretty; }

/* ---------- リビール（スクロールで出現）。js-reveal は main.js が条件を満たすときだけ付与 ---------- */
.js-reveal [data-reveal] {
  opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1), filter 1s;
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ---------- 01 Hero ---------- */
#top { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 80px; position: relative; }
.kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--text-sub); }
.glow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 12px var(--ac); }
h1 { margin: 0; font-weight: 900; font-size: clamp(38px, 5.6vw, 88px); line-height: 1.18; letter-spacing: -0.01em; text-wrap: pretty; }
h1 .accent, .h2 .accent { color: var(--ac); }

/* 主要見出しは「英語を大きく＋日本語を小さく」の2段（Hero / Concept / Contact）。
   英語は和文より幅を取るため、和文見出し時代のサイズ（5.6vw 等）より小さくしている。
   本文カラム幅は 960px 以上で 50vw のため、"There is always" が折り返さない上限が約 4.4vw */
.en, .ja { display: block; }
h1 .en { font-size: clamp(34px, 4.4vw, 70px); line-height: 1.12; letter-spacing: -0.02em; }
.h2 .en { font-size: clamp(28px, 3.3vw, 50px); line-height: 1.18; letter-spacing: -0.015em; }
h1 .ja, .h2 .ja {
  margin-top: 24px; font-size: clamp(15px, 1.4vw, 20px); font-weight: 700; line-height: 1.7;
  letter-spacing: 0.08em; color: var(--text-body);
}
.hero-lead { margin: 40px 0 0; max-width: 30em; font-size: clamp(15px, 1.2vw, 17px); line-height: 2; color: var(--text-body); text-wrap: pretty; }
.hero-sub { margin: 28px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--text-sub); }
.scroll-hint { position: absolute; bottom: 32px; left: 0; display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--text-sub); }
.scroll-hint .bar { width: 48px; height: 1px; background: linear-gradient(90deg, var(--ac), transparent); }

/* ---------- 02 Concept ---------- */
.concept-lead { margin: 40px 0 0; max-width: 32em; font-size: 16px; line-height: 2.1; color: var(--text-body); text-wrap: pretty; }
.steps { margin-top: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.step {
  padding: 28px 24px; border: 1px solid rgba(232, 238, 255, 0.14); border-radius: 16px;
  background: rgba(10, 20, 50, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.step .name { margin-top: 16px; font-size: 22px; font-weight: 700; }
.step p { margin: 12px 0 0; font-size: 14px; line-height: 1.9; color: var(--text-body); }
.step.is-final { border-color: var(--ac); background: rgba(0, 212, 232, 0.06); }
.step.is-final .mono-cap { color: var(--ac); }

/* ---------- 03 Service ---------- */
.service-title { margin-bottom: 64px; }
.orbit-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule-strong); }
.orbit-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 32px 0; border-bottom: 1px solid var(--rule-soft); }
.orbit-icon { width: 44px; height: 44px; border: 1px solid rgba(232, 238, 255, 0.5); border-radius: 50%; position: relative; margin-top: 2px; }
/* 衛星ドットの位置は行ごとに違う（上・右・下・左・右上）。位置のみ modifier で指定 */
.orbit-icon i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 10px var(--ac); }
.orbit-icon .p-top { top: -4px; left: 18px; }
.orbit-icon .p-right { top: 18px; right: -4px; }
.orbit-icon .p-bottom { bottom: -4px; left: 18px; }
.orbit-icon .p-left { top: 18px; left: -4px; }
.orbit-icon .p-corner { top: 2px; right: 2px; }
.orbit-row h3 { margin: 10px 0 0; font-size: 22px; font-weight: 700; }
.orbit-row h3 small { font-size: 14px; font-weight: 500; color: var(--text-sub); }
.orbit-row p { margin: 12px 0 0; font-size: 14px; line-height: 1.9; color: var(--text-body); text-wrap: pretty; }

/* ---------- 04 Approach ---------- */
.vectors { display: flex; flex-direction: column; gap: 88px; }
.vector-id { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em; color: var(--ac); }
.vectors h3 { margin: 16px 0 0; font-size: clamp(24px, 2.4vw, 34px); font-weight: 900; line-height: 1.4; }
.vectors p { margin: 24px 0 0; font-size: 15px; line-height: 2.1; color: var(--text-body); text-wrap: pretty; }
.tags { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-body); }
.tags span { padding: 6px 14px; border: 1px solid var(--rule-strong); border-radius: 999px; }

/* ---------- 05 Company ---------- */
.company-title { margin-bottom: 56px; }
.company-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule-strong); font-size: 15px; }
.company-list .row { display: grid; grid-template-columns: minmax(96px, 160px) minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule-soft); }
.company-list dt { color: var(--text-sub); }
.company-list dd { margin: 0; line-height: 1.9; }

/* ---------- 06 Contact ---------- */
#contact { min-height: 100vh; padding: 160px 0 64px; display: flex; flex-direction: column; }
#contact .h2 .en { font-size: clamp(32px, 4vw, 62px); line-height: 1.12; }
.contact-lead { margin: 32px 0 0; max-width: 30em; font-size: 16px; line-height: 2; color: var(--text-body); }
.contact-links { margin-top: 56px; display: flex; flex-direction: column; border-top: 1px solid var(--rule-strong); }
.contact-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 28px 0;
  border-bottom: 1px solid var(--rule-strong); transition: padding-left .2s, color .2s;
}
.contact-row:hover { color: var(--ac); padding-left: 12px; }
.contact-row .text { display: flex; flex-direction: column; gap: 6px; }
.contact-row .value { font-family: var(--font-mono); font-size: clamp(18px, 2vw, 28px); font-weight: 500; }
.contact-row .arrow { font-family: var(--font-mono); font-size: 24px; }
.cta {
  margin-top: 40px; align-self: flex-start; display: flex; align-items: center; gap: 16px; padding: 20px 32px;
  background: var(--ac); color: var(--bg); font-size: 15px; font-weight: 700; border-radius: 999px;
  box-shadow: 0 0 32px rgba(0, 212, 232, 0.35); transition: background .2s, color .2s;
}
.cta:hover { background: var(--text); color: var(--bg); }
.cta .arrow { font-family: var(--font-mono); }
.site-footer {
  margin-top: auto; padding-top: 120px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--text-sub);
}
.site-footer img { height: 20px; width: auto; opacity: 0.8; }