/* Liquid Glass Tabs — 共通スタイル（liquid-glass-tabs.js とセットで使う）
 *
 *   色はアプリ側で上書きできる:
 *     [data-lgt] { --lgt-active: #e8744f; --lgt-inactive: #7d6b53; }
 *   タブバー（nav）には position: sticky / fixed / relative のいずれかが必要（レンズは absolute で置く）。
 *   本文を横にずらすので、本文を包む要素に overflow-x: clip を付ける（hidden だと sticky が効かなくなる）。
 */
/* 既定の色。:where() で優先度を最低にしてあるので、アプリ側の
   [data-lgt] { --lgt-active: ... } が読み込み順に関係なく必ず勝つ */
:where([data-lgt]) {
  --lgt-active: #e8744f;
  --lgt-inactive: #7d6b53;
  --lgt-glass-shadow: 120, 70, 40;   /* 影の色（RGB） */
  --lgt-glass-ring: 232, 116, 79;    /* ごく薄い外周リングの色（RGB） */
}

/* レンズの土台: タブの上を横に移動する箱 */
.lgt-track {
  position: absolute; top: 12px; left: 0;
  width: 60px; height: 48px;
  pointer-events: none;
  transform: translateX(0);
  z-index: 2; /* アイコンの上に透明なガラスを重ねる */
}
[data-lgt] > * { position: relative; z-index: 1; }
[data-lgt] > .lgt-track { position: absolute; z-index: 2; }

/* 白いガラス（本体と残像） */
.lgt-lens,
.lgt-trail {
  --lgt-fill: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 55%, rgba(255,255,255,.92) 100%);
  --lgt-fill-landing: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 55%, rgba(255,255,255,1) 100%);
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: var(--lgt-fill);
  box-shadow:
    0 6px 16px rgba(var(--lgt-glass-shadow), .14),
    0 1px 3px rgba(var(--lgt-glass-shadow), .10),
    0 0 0 .5px rgba(var(--lgt-glass-ring), .22),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -6px 12px rgba(255,255,255,.35);
  -webkit-backdrop-filter: saturate(160%) brightness(1.04);
  backdrop-filter: saturate(160%) brightness(1.04);
  transform: scaleX(1) scaleY(1);
  transform-origin: center;
}
.lgt-lens {
  z-index: 2;
  overflow: hidden;   /* 中身のコピーをレンズの形で切り抜く */
  --lgt-ab: 0;        /* 虹色の縁の濃さ（0〜1、速度で JS が更新） */
  --lgt-dir: 1;       /* 進行方向（1=右へ / -1=左へ） */
  transition: transform .1s cubic-bezier(.22, .72, .2, 1);
}
.lgt-trail {
  opacity: 0;
  z-index: 1;
  transition: transform .14s cubic-bezier(.22, .72, .2, 1), opacity .14s ease-out;
}
.lgt-trail-2 { z-index: 0; }
.lgt-track.lgt-trailing .lgt-trail-1 { opacity: .22; }
.lgt-track.lgt-trailing .lgt-trail-2 { opacity: .1; }

/* 屈折: レンズ越しに見えるタブのコピー。実物と同じ位置に重ねて少し拡大し、動くと逆方向にずれる */
.lgt-inner {
  position: absolute; inset: 0;
  display: block;
  transform-origin: center;
  transform: scale(1.12);
  transition: transform .12s cubic-bezier(.22, .72, .2, 1);
  pointer-events: none;
}
.lgt-clone {
  position: absolute; left: 0; top: 0;
  display: flex; justify-content: space-around;
  box-sizing: border-box;
  pointer-events: none;
}
.lgt-clone > * { position: static; z-index: auto; }

/* 色収差: 縁の細いリング。進行方向側が青緑、後ろ側が赤にずれて見える */
.lgt-lens::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 999px;
  padding: 1.5px;
  background: linear-gradient(90deg,
    rgba(255,70,60,.95) 0%, rgba(255,170,40,.7) 22%, rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%, rgba(40,220,255,.7) 78%, rgba(60,90,255,.95) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--lgt-ab);
  transform: scaleX(var(--lgt-dir));
  transition: opacity .22s ease-out;
  pointer-events: none;
}

/* 移動のアニメーション（操作中は追従優先で切る） */
[data-lgt].lgt-ready .lgt-track {
  transition: transform .34s cubic-bezier(.34, 1.3, .64, 1), opacity .2s ease;
}
[data-lgt].lgt-swiping .lgt-track,
[data-lgt].lgt-nav-dragging .lgt-track,
[data-lgt].lgt-swiping .lgt-trail,
[data-lgt].lgt-nav-dragging .lgt-trail,
[data-lgt].lgt-swiping .lgt-inner,
[data-lgt].lgt-nav-dragging .lgt-inner { transition: none; }
[data-lgt].lgt-swiping .lgt-lens::after,
[data-lgt].lgt-nav-dragging .lgt-lens::after { transition: opacity .06s linear; }
[data-lgt].lgt-hidden .lgt-track { opacity: 0; } /* タブ以外の画面・PC */

/* スワイプ中の仮の選択色: レンズが乗っているタブだけ選択色、他は非選択色 */
[data-lgt] .lgt-btn { transition: color .12s ease; }
[data-lgt].lgt-preview .lgt-btn { color: var(--lgt-inactive) !important; }
[data-lgt].lgt-preview .lgt-btn.lgt-over { color: var(--lgt-active) !important; }

/* 着地: アイコンが弾み、ガラスが一瞬明るくなる */
.lgt-btn.lgt-landing svg,
.lgt-btn.lgt-landing img,
.lgt-btn.lgt-landing .lgt-icon {
  transform-origin: center bottom;
  animation: lgt-icon-landing .18s cubic-bezier(.34, 1.56, .64, 1);
}
.lgt-lens.lgt-landing { animation: lgt-fill-landing .12s ease-out; }
@keyframes lgt-icon-landing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
@keyframes lgt-fill-landing {
  0% { background: var(--lgt-fill-landing); }
  100% { background: var(--lgt-fill); }
}

/* 本文の追従とスライド */
.lgt-dragging { will-change: transform; transition: none !important; }
.lgt-settling { will-change: transform; transition: transform .22s cubic-bezier(.22, .72, .2, 1) !important; }

@media (min-width: 900px) {
  .lgt-track { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-lgt].lgt-ready .lgt-track, .lgt-lens, .lgt-settling { transition: none !important; }
  .lgt-trail, .lgt-lens::after { display: none; }
  .lgt-inner { transform: none; transition: none; }
  .lgt-btn.lgt-landing svg, .lgt-btn.lgt-landing img, .lgt-lens.lgt-landing { animation: none; }
}