/* ================================================================
   a010-hero-tunnel.css
   WebGL パーティクルトンネル hero — full-bleed 背景・スクロール貫通ピン留め
   移植元: A010_HERO/hero_tunnel_v2.html（詳細は同ディレクトリ PLAN.md 参照）

   スコープ済みカスタムプロパティ（--a010-hero-ink / --a010-hero-gray /
   --a010-hero-paper）: assets/js/a010-hero-tunnel.js が毎フレーム
   #hero(.a010-hero) と #a010-nav へ書き込む、ダーク→ライト反転の実値。
   すべて var(--x, フォールバック) で参照するため、JS未実行時
   （WebGL不可・スクリプト未読込）や front-page 以外のテンプレートでは
   既存の静的トークン（--ink / --g-50 / --bg）にそのままフォールバックし、
   ナビ等の見た目は普段通りになる。
   ================================================================ */

:root {
  --a010-hero-gutter: clamp(20px, 5vw, 56px);
}

/* ---------- full-bleed breakout（style.css の body{max-width:1200px} を突破） ---------- */
.a010-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ---------- ピン留めラッパー（ネイティブ sticky。スクロールジャックはしない） ---------- */
.a010-hero__pin {
  position: relative;
  height: calc(100svh + 90vh); /* JS側で params.pinDistance + holdDistance により毎回上書きされる初期値 */
}
@media (prefers-reduced-motion: reduce) {
  .a010-hero__pin { height: 100svh; } /* ピン/ワープ機構を実質無効化 */
}

.a010-hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--a010-hero-paper, var(--bg));
}

/* WebGL不可時のフォールバック（淡いタウプの放射グラデーション） */
.a010-hero[data-webgl="off"] .a010-hero__tunnel-canvas { display: none; }
.a010-hero[data-webgl="off"] .a010-hero__bg {
  background: radial-gradient(ellipse 90% 70% at 50% 46%, #F8F8F8 0%, #EFEBE0 45%, #DFD8C8 78%, #D2C9B6 100%);
}

.a010-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.a010-hero__tunnel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 紙(--a010-hero-paper)側へ抜ける横方向スクリム。JSの --a010-hero-paper 追従で
   ダーク/ライト反転中も色の段差が出ないよう color-mix() で常に現在値を参照する */
.a010-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--a010-hero-paper, var(--bg)) 94%, transparent) 0%,
    color-mix(in srgb, var(--a010-hero-paper, var(--bg)) 68%, transparent) 24%,
    color-mix(in srgb, var(--a010-hero-paper, var(--bg)) 16%, transparent) 46%,
    color-mix(in srgb, var(--a010-hero-paper, var(--bg)) 0%, transparent) 60%);
}

/* 地平線弧（下端の区切り） */
.a010-hero__horizon-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--a010-hero-paper, var(--bg)) 0%, transparent) 0%,
    color-mix(in srgb, var(--a010-hero-paper, var(--bg)) 50%, transparent) 52%,
    var(--a010-hero-paper, var(--bg)) 100%);
}
.a010-hero__horizon-line {
  position: absolute; left: -6%; right: -6%; bottom: 9vh; height: 140px; z-index: 1; pointer-events: none; opacity: .85;
}

.a010-hero__inner {
  position: relative; z-index: 2;
  min-height: 100svh;
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(92px, 12vh, 128px) var(--a010-hero-gutter) clamp(80px, 10vh, 108px);
  display: flex; flex-direction: column;
}

/* メタ行: 既存の a010-hero__meta / -tag / -time のレイアウトはそのまま流用し、
   ダーク/ライト反転する色だけをここで上書き（他テンプレートには影響しない。
   このファイル自体が front-page でしか読み込まれないため） */
.a010-hero__inner .a010-hero__meta-tag,
.a010-hero__inner .a010-hero__time {
  color: var(--a010-hero-gray, var(--g-50));
}

.a010-hero__wordmark-stage {
  position: relative; flex: 1;
  display: flex; align-items: center;
}
.a010-hero__wordmark {
  margin: 0;
  font-family: var(--sans-en);
  font-weight: 600;
  font-size: clamp(4.5rem, 13.5vw, 11.5rem);
  line-height: .9;
  letter-spacing: 0.02em;
  color: var(--a010-hero-ink, var(--ink));
  pointer-events: none;
  user-select: none;
  z-index: 3;
}
.a010-hero__wordmark-zero { font-weight: 600; }

.a010-hero__scroll {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  align-self: flex-start;
  font-family: var(--sans-en); font-size: 10px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--a010-hero-gray, var(--g-50));
}
.a010-hero__scroll .line {
  display: block; width: 1px; height: 36px; background: currentColor;
  position: relative; overflow: hidden;
}
.a010-hero__scroll .line::after {
  content: ""; position: absolute; inset: 0; top: -36px; width: 1px; height: 36px;
  background: var(--a010-hero-ink, var(--ink));
  animation: a010-hero-scrollline 2.4s ease-in-out infinite;
}
@keyframes a010-hero-scrollline {
  0% { transform: translateY(0); }
  60%, 100% { transform: translateY(72px); }
}

@media (max-width: 820px) {
  .a010-hero__wordmark-stage { align-items: flex-start; padding-top: 6vh; }
  .a010-hero__wordmark { font-size: clamp(4rem, 30vw, 9rem); }
}

@media (prefers-reduced-motion: reduce) {
  .a010-hero__scroll .line::after { animation: none; }
}

/* ================================================================
   NAV — front-page ヒーローのダーク/ライト反転に連動する色オーバーライド
   このファイルは front-page でのみ読み込まれるため、サービスページ等の
   固定ナビには一切影響しない（フォールバック var(--ink) 等がそのまま効く）
   ================================================================ */
#a010-nav .a010-nav__logo,
#a010-nav .a010-nav__link-jp {
  color: var(--a010-hero-ink, var(--ink));
}
#a010-nav .a010-nav__link-en {
  color: var(--a010-hero-gray, var(--g-50));
}
#a010-nav .a010-nav__ham-bar {
  background: var(--a010-hero-ink, var(--ink));
}
#a010-nav .a010-nav__hamburger {
  color: var(--a010-hero-ink, var(--ink));
}
#a010-nav .a010-nav__cta.a010-btn--solid {
  background: var(--a010-hero-ink, var(--ink));
  border-color: var(--a010-hero-ink, var(--ink));
  color: var(--a010-hero-paper, var(--bg));
}

/* ---------- デバッグパネル（?debug=1、CEO用チューニングUIをそのまま温存） ---------- */
.a010-hero-debugpanel {
  position: fixed; z-index: 80; right: 14px; top: 76px; width: 236px;
  background: rgba(248,248,248,.96); border: 1px solid var(--g-30);
  padding: 12px 14px 14px; font-family: var(--mono); font-size: 10px; color: var(--g-70);
}
.a010-hero-debugpanel h3 {
  margin: 0 0 10px; font-family: var(--sans-en); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink); font-weight: 600;
}
.a010-hero-debugpanel .row { margin-bottom: 9px; }
.a010-hero-debugpanel label { display: flex; justify-content: space-between; margin-bottom: 3px; letter-spacing: .08em; }
.a010-hero-debugpanel output { color: var(--ink); }
.a010-hero-debugpanel input[type="range"] { width: 100%; accent-color: var(--ink); }
.a010-hero-debugpanel .save-row { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--g-30); }
.a010-hero-debugpanel button {
  width: 100%; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  padding: 7px 8px; background: transparent; color: var(--ink); border: 1px solid var(--ink);
  cursor: pointer;
}
.a010-hero-debugpanel button:hover { background: var(--ink); color: var(--bg); }
.a010-hero-debugpanel .save-status { margin-top: 6px; color: var(--g-70); text-align: center; }
.a010-hero-debugpanel textarea {
  width: 100%; margin-top: 6px; font-family: var(--mono); font-size: 9px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--g-30); resize: vertical;
}