/* LOHI MUSIC LAB 起動ロゴ（共通部品）
   ------------------------------------------------------------------
   🚨 これは大本（マスター）。直すのはここだけ。
      各アプリへは _brand/sync-lohi-splash.mjs でコピーする。
      アプリ側のコピーを直接いじらないこと（次のコピーで消える）。
   ------------------------------------------------------------------
   使い方は lohi-splash.js の先頭を見る。 */

.lohi-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(106, 45, 255, 0.22), transparent 68%),
    #0a0014;
  opacity: 0;
  transition: opacity var(--lohi-in, 700ms) ease-out;
  touch-action: none; /* ロゴが出ている間は下の画面を触らせない */
}
/* 🚨 消し方は2段構え。幕ごと薄くすると、ロゴが残っているうちに
   うしろの画面が透けて重なる。
   ①ロゴだけ消す → ②真っ黒で少し置く → ③幕を薄くして画面を出す。 */
.lohi-splash.is-in { opacity: 1; }
.lohi-splash.is-hold,
.lohi-splash.is-logoout,
.lohi-splash.is-black { opacity: 1; transition: none; }
.lohi-splash.is-bgout { opacity: 0; transition: opacity var(--lohi-bgout, 520ms) ease-in; }

.lohi-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  animation: lohiRise var(--lohi-in, 700ms) ease-out forwards;
}
/* 🚨 ここは transition で消してはいけない。出るときに animation を当てているので、
   animation を none にした瞬間に opacity が 1→0 へ飛び、transition が始まらない
   （実測：ロゴが0.6秒かけて消えるはずが、一瞬で消えていた）。
   消すときも animation で上書きすること。 */
.lohi-splash.is-logoout .lohi-splash-inner {
  transform: none;
  animation: lohiFade var(--lohi-logoout, 600ms) ease-in forwards;
}
@keyframes lohiFade {
  from { opacity: 1; }
  to { opacity: 0; }
}
.lohi-splash.is-black .lohi-splash-inner,
.lohi-splash.is-bgout .lohi-splash-inner {
  animation: none;
  opacity: 0;
  transform: none;
}
@keyframes lohiRise {
  from { opacity: 0; transform: translateY(11px); }
  to { opacity: 1; transform: translateY(0); }
}

.lohi-splash-brand {
  margin: 0;
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(17px, 4.6vw, 34px);
  font-weight: 700;
  letter-spacing: 0.34em;
  /* 字間を空けた分だけ右に寄るので、その分だけ戻して中央に見せる */
  text-indent: 0.34em;
  color: #eaf9ff;
  white-space: nowrap;
  text-shadow:
    0 0 6px rgba(45, 226, 255, 0.85),
    0 0 18px rgba(45, 226, 255, 0.5),
    0 0 34px rgba(106, 45, 255, 0.35);
  animation: lohiGlow 2.2s ease-in-out infinite;
}
@keyframes lohiGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(45,226,255,0.85), 0 0 18px rgba(45,226,255,0.5), 0 0 34px rgba(106,45,255,0.35); }
  50% { text-shadow: 0 0 8px rgba(45,226,255,1), 0 0 26px rgba(45,226,255,0.65), 0 0 46px rgba(106,45,255,0.5); }
}

.lohi-splash-wave {
  width: clamp(200px, 46vw, 330px);
  height: clamp(26px, 7vw, 46px);
  overflow: visible;
}
/* 観測装置の基準線。波が乗る土台 */
.lohi-splash-base { stroke: rgba(122, 249, 192, 0.18); stroke-width: 1; }
/* 下地の波（置きロゴのときだけ使う）。薄く、動かない。
   光る線がループで消えている間も、波の形が分かるようにするため。 */
.lohi-splash-ghost {
  fill: none;
  stroke: rgba(122, 249, 192, 0.22);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 波形。LOHIの緑（左のミント #7af9c0 → 右のライム #c8ff5e） */
.lohi-splash-path {
  fill: none;
  stroke: url(#lohiWaveGrad);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(122,249,192,0.85)) drop-shadow(0 0 9px rgba(168,255,138,0.45));
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  /* 🚨 なだらかな ease-in-out にすること。前のめりの曲線だと最初に一気に走って
     後半が止まって見える（実測：0.4秒で1割→9割）。 */
  animation: lohiDraw var(--lohi-draw, 1700ms) cubic-bezier(0.37, 0, 0.63, 1) 200ms forwards;
}
@keyframes lohiDraw { to { stroke-dashoffset: 0; } }

.lohi-splash-tag {
  margin: 0;
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(9px, 1.9vw, 13px);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: rgba(234, 249, 255, 0.6);
  white-space: nowrap;
}

/* 動きを控える：光の脈打ちと線を引く動きを止める。ロゴ自体は出す */
.lohi-splash.is-calm .lohi-splash-brand { animation: none; }
.lohi-splash.is-calm .lohi-splash-path { stroke-dashoffset: 0; animation: none; }
/* 🚨 この指定は後ろにあるので、同じ強さだと消える指定を打ち消す。
   消えている途中には効かせない。 */
.lohi-splash.is-calm:not(.is-logoout):not(.is-black):not(.is-bgout) .lohi-splash-inner {
  animation: none;
  opacity: 1;
  transform: none;
}

/* ===== ページに置きっぱなしにする版（公式HPのヒーローなど）===== */
/* 波がずっと流れ続ける。出したり消したりはしない。 */
.lohi-mark .lohi-splash-inner { animation: none; opacity: 1; transform: none; }
.lohi-mark .lohi-splash-path {
  /* 線と同じ長さの実線＋同じ長さの空白。ずらし続けると
     「引かれる → 左から消える → また引かれる」がつなぎ目なく繰り返す。
     🚨 長さは JS が実測して --lohi-len に入れる。決め打ちにすると、
        線より短ければ途中で切れ、長すぎれば「ぜんぶ空白」の時間ができて波が消える。 */
  stroke-dasharray: var(--lohi-len, 420px) var(--lohi-len, 420px);
  stroke-dashoffset: var(--lohi-len2, 840px);
  animation: lohiLoop var(--lohi-loop, 5.2s) linear infinite;
}
@keyframes lohiLoop { to { stroke-dashoffset: 0; } }
.lohi-mark.is-calm .lohi-splash-path {
  animation: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}