/* ============================================================
 * splash.css  🔒 仕様クリティカル
 * --------------------------------------------------------------
 * 役割: スプラッシュ演出（phase-loading → settle → exit）
 * 依存: base.css（カラー変数）
 * 変更時の注意:
 *   - カスケード順厳守: .phase-exit 定義は .phase-settle より後ろ（ルール #7）
 *   - ID衝突回避: #logo-c / logo-line-1..3 / logo-man は splash 側が占有
 *   - 最低表示時間 5秒保証（JS 側で制御・ルール #3）
 *   - 正準仕様: ui/logo_animation_spec.md
 * 元: ui/index.html L65-262
 * ============================================================ */

/* ===== スプラッシュ（ロゴアニメーション） ===== */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 34px;
}
.splash.phase-hidden { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.splash svg { width: 140px; height: 140px; overflow: visible; display: block; }
.splash-text-slot {
  position: relative;
  height: 22px;
  width: 100%;
  overflow: visible;
}
.splash-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px; font-weight: 700; letter-spacing: 2px;
  color: #37359A;
  font-family: 'Comfortaa', sans-serif;
  line-height: 1;
}
.splash-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  will-change: transform, opacity;
}

/* loading....（ローディング中のみアイコン直下に表示、ふわふわ） */
.splash-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px; letter-spacing: 2px; color: #888;
  font-family: 'Comfortaa', sans-serif;
  line-height: 1;
  animation: loadingFloat 1.6s ease-in-out infinite;
}
.phase-settle .splash-loading,
.phase-exit .splash-loading { display: none; }
.phase-loading .splash-text { display: none; }
@keyframes loadingFloat {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-4px); }
}

/* パーツ共通: transform-box + origin */
.splash #logo-c, .splash #logo-man {
  transform-origin: center;
  transform-box: fill-box;
}
.splash #logo-line-1, .splash #logo-line-2, .splash #logo-line-3 {
  transform-origin: left center;
  transform-box: fill-box;
}

/* ===== Phase1: Loading Loop（グレー + 2.4sループ） ===== */
.phase-loading svg { filter: grayscale(1) brightness(1.05) contrast(0.9); }
.phase-loading #logo-c      { animation: loopC   2.4s cubic-bezier(0.68,-0.55,0.27,1.55) infinite; }
.phase-loading #logo-line-1 { animation: loopL1  2.4s cubic-bezier(0.68,-0.55,0.27,1.55) infinite; }
.phase-loading #logo-line-2 { animation: loopL2  2.4s cubic-bezier(0.68,-0.55,0.27,1.55) infinite; }
.phase-loading #logo-line-3 { animation: loopL3  2.4s cubic-bezier(0.68,-0.55,0.27,1.55) infinite; }
.phase-loading #logo-man    { animation: loopMan 2.4s ease-out infinite; }

@keyframes loopC {
  0%   { opacity: 0; transform: translateY(30px) scale(0.5); }
  10%  { opacity: 1; transform: translateY(-6px) scale(1.1); }
  20%  { opacity: 1; transform: translateY(0) scale(1); }
  55%  { opacity: 1; transform: translateY(0) scale(1); }
  70%  { opacity: 1; transform: translateY(10px) scale(0.95); }
  85%  { opacity: 0; transform: translateY(60px) scale(0.7); }
  100% { opacity: 0; transform: translateY(60px) scale(0.7); }
}
@keyframes loopL1 {
  0%   { opacity: 0; transform: translateY(-20px) scaleX(0); }
  15%  { opacity: 1; transform: translateY(0) scaleX(0.95); }
  25%  { opacity: 1; transform: translateY(0) scaleX(1); }
  55%  { opacity: 1; transform: translateY(0) scaleX(1); }
  72%  { opacity: 1; transform: translateY(12px) scaleX(1); }
  88%  { opacity: 0; transform: translateY(55px) scaleX(0.8); }
  100% { opacity: 0; transform: translateY(55px) scaleX(0.8); }
}
@keyframes loopL2 {
  0%   { opacity: 0; transform: translateY(-20px) scaleX(0); }
  20%  { opacity: 1; transform: translateY(0) scaleX(0.95); }
  30%  { opacity: 1; transform: translateY(0) scaleX(1); }
  55%  { opacity: 1; transform: translateY(0) scaleX(1); }
  75%  { opacity: 1; transform: translateY(18px) scaleX(1); }
  90%  { opacity: 0; transform: translateY(70px) scaleX(0.8); }
  100% { opacity: 0; transform: translateY(70px) scaleX(0.8); }
}
@keyframes loopL3 {
  0%   { opacity: 0; transform: translateY(-20px) scaleX(0); }
  25%  { opacity: 1; transform: translateY(0) scaleX(0.95); }
  35%  { opacity: 1; transform: translateY(0) scaleX(1); }
  55%  { opacity: 1; transform: translateY(0) scaleX(1); }
  78%  { opacity: 1; transform: translateY(8px) scaleX(1); }
  92%  { opacity: 0; transform: translateY(50px) scaleX(0.8); }
  100% { opacity: 0; transform: translateY(50px) scaleX(0.8); }
}
@keyframes loopMan {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.96); }
  35%  { opacity: 0; transform: translateY(-12px) scale(0.96); }
  55%  { opacity: 1; transform: translateY(0) scale(1); }
  70%  { opacity: 1; transform: translateY(0) scale(1); }
  85%  { opacity: 0.6; transform: translateY(20px) scale(0.98); }
  100% { opacity: 0; transform: translateY(50px) scale(0.95); }
}

/* ===== Phase2: Settle（カラー化 + 呼吸） ===== */
.phase-settle #logo-c,
.phase-settle #logo-line-1,
.phase-settle #logo-line-2,
.phase-settle #logo-line-3,
.phase-settle #logo-man {
  animation: none;
  opacity: 1;
  transform: none;
}
.phase-settle svg {
  animation: fluffyColorize 1.4s ease-out forwards,
             gentleBreathe 2.8s ease-in-out 1.4s 1;
  transform-origin: center;
}
@keyframes fluffyColorize {
  0%   { filter: grayscale(1) brightness(1.05) contrast(0.9); transform: scale(1); }
  30%  { filter: grayscale(0.6) brightness(1.1) contrast(0.95); transform: scale(1.04); }
  70%  { filter: grayscale(0) brightness(1.05) contrast(1); transform: scale(1.03); }
  100% { filter: grayscale(0) brightness(1) contrast(1); transform: scale(1); }
}
@keyframes gentleBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* ===== Phase2.5: テキスト出現（カラー化と同時） ===== */
.phase-settle .splash-text .char {
  animation: charFloatIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes charFloatIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Phase3: Exit（下にバラけてフェードアウト） ===== */
.phase-exit svg           { filter: none; }
.phase-exit #logo-c       { animation: exitC   0.9s cubic-bezier(0.55, 0, 0.7, 0.2) forwards; }
.phase-exit #logo-line-1  { animation: exitL1  0.9s cubic-bezier(0.55, 0, 0.7, 0.2) forwards; }
.phase-exit #logo-line-2  { animation: exitL2  0.9s cubic-bezier(0.55, 0, 0.7, 0.2) forwards; }
.phase-exit #logo-line-3  { animation: exitL3  0.9s cubic-bezier(0.55, 0, 0.7, 0.2) forwards; }
.phase-exit #logo-man     { animation: exitMan 0.9s cubic-bezier(0.55, 0, 0.7, 0.2) forwards; }

@keyframes exitC   { to { opacity: 0; transform: translateY(80px) scale(0.7) rotate(-8deg); } }
@keyframes exitL1  { to { opacity: 0; transform: translateY(70px) scaleX(0.8) rotate(4deg); } }
@keyframes exitL2  { to { opacity: 0; transform: translateY(90px) scaleX(0.8) rotate(-3deg); } }
@keyframes exitL3  { to { opacity: 0; transform: translateY(75px) scaleX(0.8) rotate(5deg); } }
@keyframes exitMan { to { opacity: 0; transform: translateY(85px) scale(0.7) rotate(6deg); } }

/* 文字退場：カスケード順注意（settleより後に定義） */
/* opacity/transform を明示して charFloatIn forwards 解除後の位置ズレを防ぐ */
.splash.phase-exit .splash-text .char {
  animation: exitChar 0.9s cubic-bezier(0.55, 0, 0.7, 0.2) forwards;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.splash.phase-exit .splash-text .char:nth-child(1) { animation-delay: 0.22s; --exitY: 80px; }
.splash.phase-exit .splash-text .char:nth-child(2) { animation-delay: 0.08s; --exitY: 95px; }
.splash.phase-exit .splash-text .char:nth-child(3) { animation-delay: 0.30s; --exitY: 72px; }
.splash.phase-exit .splash-text .char:nth-child(4) { animation-delay: 0.14s; --exitY: 102px; }
.splash.phase-exit .splash-text .char:nth-child(5) { animation-delay: 0.36s; --exitY: 85px; }
.splash.phase-exit .splash-text .char:nth-child(6) { animation-delay: 0.02s; --exitY: 78px; }
.splash.phase-exit .splash-text .char:nth-child(7) { animation-delay: 0.26s; --exitY: 90px; }
.splash.phase-exit .splash-text .char:nth-child(8) { animation-delay: 0.12s; --exitY: 100px; }
.splash.phase-exit .splash-text .char:nth-child(9) { animation-delay: 0.32s; --exitY: 75px; }
@keyframes exitChar {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(var(--exitY, 80px)); }
}