/* =========================================================================
   liquid-logo.css — ナビ／フッターの EVMEL を白い液体金属にする
   相方は assets/liquid-logo.js。

   ■ 大原則
   文字はDOMに残したまま透明にする。canvas に置き換えない。
   ロゴは会社名そのものなので、スクリーンリーダー・検索エンジン・
   JS/WebGLが落ちた環境のいずれからも読めなくなってはいけない。
   ========================================================================= */

/* .lq-on が付くのは JS がシェーダーの起動に成功したときだけ。
   付かなければ既存の白い EVMEL がそのまま出る。 */

/* 🚨 キャンバスの基準は <a> ではなく、この内側の箱にする。
   .nav-logo は evmel.css で flex:1 を持ち、ナビの残り幅すべてに広がる
   （実測 1440px）。<a> を基準にすると 1440×46 の箱に contain され、
   EVMEL が中央に豆粒で出る。.lq-wrap は文字にぴったり張り付く。 */
.lq-on .lq-wrap {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

/* 文字は「場所を取る」役目だけ残して透明にする。
   display:none や visibility:hidden にすると <a> の幅と当たり判定が
   消えるので、色だけを透明にする。 */
.lq-on .lq-text {
  color: transparent;
  transition: none;          /* .nav-logo:hover の color 遷移を効かせない */
}

.lq-on .lq-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;      /* リンクのクリックを奪わない */
}

.lq-on .lq-stage canvas {
  display: block;
  width: 100%;
  height: 100%;

  /* 🚨 mix-blend-mode を使ってはいけない。
     WebGLキャンバスは合成レイヤーに昇格すると mix-blend-mode が無視され、
     screen にしても土台の文字を「そのまま上書き」する。
     plus-lighter は逆に不透明な黒背景ごと加算され、ロゴの位置に
     灰色の四角が出る。どちらも実測で確認済み。
     → 合成に頼らず、明度は filter で持ち上げる。 */
  filter: brightness(var(--lq-brightness, 2.6)) contrast(var(--lq-contrast, 1.1));
}

/* -------------------------------------------------------------------------
   hover の作り替え

   evmel.css の .nav-logo:hover は letter-spacing を 0.4em → 0.52em へ
   0.5秒かけて広げる。文字が動いてもキャンバスは追従できず、
   金属だけ取り残されて二重像になる。
   → シェーダーが動いているときは字間アニメーションを止め、
     代わりに金属の流れが速くなる（速度は liquid-logo.js が変える）。
   ------------------------------------------------------------------------- */
.lq-on:hover { letter-spacing: 0.4em; }
.lq-on:hover .lq-text { color: transparent; }

/* -------------------------------------------------------------------------
   調整パネル（?lqtune=1 のときだけ出る）
   本番のURLに付けても他の人には見えない。数値を決めたら
   「設定をコピー」して liquid-logo.js の LOOK に貼る。
   ------------------------------------------------------------------------- */
#lq-tune {
  position: fixed; right: 18px; bottom: 18px; z-index: 100000;
  width: 300px; max-height: 84vh; overflow: auto;
  background: rgba(10,10,10,.94);
  border: 1px solid var(--gold-border); border-radius: 3px;
  padding: 18px 18px 14px;
  font-family: var(--font-label), Arial, sans-serif;
  color: var(--gray-light);
  backdrop-filter: blur(6px);
}
#lq-tune h4 {
  margin: 0 0 14px; font-size: 10.5px; font-weight: 400;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
}
#lq-tune .r { margin-bottom: 12px; }
#lq-tune .h {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 5px;
}
#lq-tune .h b { color: var(--gold-light); font-weight: 400; font-variant-numeric: tabular-nums; }
#lq-tune input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 1px;
  background: var(--gold-border); outline: none;
}
#lq-tune input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold); cursor: pointer;
}
#lq-tune input[type=color] {
  width: 100%; height: 26px; padding: 0; border: 1px solid var(--gold-border);
  background: transparent; cursor: pointer;
}
#lq-tune button {
  width: 100%; margin-top: 8px;
  font-family: inherit; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-light); background: transparent;
  border: 1px solid var(--gold-border); border-radius: 2px;
  padding: 10px; cursor: pointer;
  transition: color .3s, background .3s, border-color .3s;
}
#lq-tune button:hover { color: var(--black); background: var(--gold); border-color: var(--gold); }

/* -------------------------------------------------------------------------
   reduced-motion — 演出を出さない（文字は元の白に戻す）
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lq-on .lq-text { color: var(--white); }
  .lq-on .lq-stage { display: none; }
}