/* 動きを減らしたいユーザー配慮 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* オーバーレイ土台（真っ白） */
#intro-overlay{
  position: fixed; inset: 0; background:#fff; z-index: 99999;
  display: grid; place-items: center;
  opacity: 1; transition: opacity .4s ease;
}
#intro-overlay.is-hidden{ opacity:0; pointer-events:none; }

/* 本文スクロールロック */
html.intro-lock, body.intro-lock{ overflow:hidden; }

/* ステージ（中央基準） */
.intro-stage{
  position: relative;
  width: min(90vw, 720px);
  height: min(60vh, 420px); /* 位置計算のための枠 */
  display: grid; place-items: center;
}

/* ② メッセージ：やや下→中央へ浮上 */
.intro-message{
  position: absolute; left:50%; top:55%;
  transform: translate(-50%, -50%) translateY(20px);
  opacity: 0;
}
.intro-message.is-floating{
  animation: intro-float .6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes intro-float{
  from{ opacity:0; transform: translate(-50%, -50%) translateY(20px); }
  to  { opacity:1; transform: translate(-50%, -50%) translateY(0); }
}
/* メッセージを消す */
.intro-message.is-out{
  animation: intro-fadeout .3s ease forwards;
}
@keyframes intro-fadeout{
  to{ opacity:0; }
}

/* ③ ロゴ：中央表示 */
.intro-logo{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  max-width: 60%;
  height:auto;
  opacity:0;
  transition: opacity .3s ease;
}

/* ③ ロゴが表示状態になったら opacity を固定で 1 にする */
.intro-logo.is-in{
  opacity: 1;                 /* ★これが重要 */
  animation: logo-in .4s ease forwards;
}
/* logo-in では opacity をいじらない（scaleだけ） */
@keyframes logo-in{
  from{ transform: translate(-50%,-50%) scale(.98); }
  to  { transform: translate(-50%,-50%) scale(1); }
}

/* ④ ロゴを上部へスライド（topを動かす） */
.intro-logo.to-top{
  opacity: 1; /* ★念のため固定 */
  animation: logo-to-top var(--slideUp, .8s) cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes logo-to-top{
  from{ top:50%; }
  to  { top: 12%; } /* 好みで調整 */
}


/* スキップボタン（任意） */
.intro-skip{
  position: fixed; right: 16px; bottom:16px;
  font-size:12px; padding:8px 14px; border-radius:999px;
  background:#f3f4f6; border:1px solid #e5e7eb; cursor:pointer;
}