/* ===== Opening Loader ================================================= */
#site-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#ffffff;             /* ロゴ背景色（＝最初に見える色） */
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  pointer-events:none;
  /* 幕が完全に抜けた 3.0s 後、0.4s でオーバーレイ自体をフェードアウト */
  animation:loaderFadeOut .4s 2.8s forwards ease-in;   /* 0.4s 前倒し */
}

/* ---------- ロゴ ---------- */
.loader-logo {
  width: 300px;  /* 常に 300px */
  /* 以下はそのまま */
  opacity: 0;
  transform: scale(.92);
  animation:
      logoIn  .8s  .2s forwards cubic-bezier(.2,.9,.4,1.05),
      logoOut .5s 2.2s forwards ease-in;
}

/* ---------- 幕 ---------- */
.loader-curtain{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#82785a;
  transform:translateY(100%);
  /* 不透明度は常に 1 なので keyframes で触れない */
  animation:curtainMove 2.4s .8s forwards cubic-bezier(.8,.02,.2,.98);
}

/* ===== keyframes ===== */

/* ロゴ：フェードイン */
@keyframes logoIn{
  to{opacity:1;transform:scale(1);}
}
/* ロゴ：フェードアウト */
@keyframes logoOut{
  to{opacity:0;}
}

/* 幕：下→中央(50%)で0.6s停止→上へ抜けてフェード */
@keyframes curtainMove{
  0%   {transform:translateY(100%);} /* 画面下 */
  38%  {transform:translateY(50%);}  /* 中央到達 */
  62%  {transform:translateY(50%);}  /* 停止（タメ）*/
  100% {transform:translateY(-100%);}/* 画面上へ完全退場 */
}
/* オーバーレイを薄くして消去 */
@keyframes loaderFadeOut{
  to{opacity:0;visibility:hidden;}
}