/* 動き: 出てくるときのアニメーション・紙吹雪の canvas・動きを減らす設定 */

/* 紙吹雪とポップコーン（画面全体の上に重ね、押せない） */
#fxCanvas {
  position: fixed;
  inset: 0;
  z-index: 70;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* 操作の案内は3秒ほどで消える */
.hint {
  animation: fade-out 0.6s ease 3.2s forwards;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

/* メニュー: 右から */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}

/* ダイアログ: 少し小さい所から弾んで出る */
@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }
}

/* 棚が見えたとき: 下からふわっと */
@keyframes shelf-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* シート: 少し下から */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translate(0, 12px);
  }
}

/* お知らせ: 中央寄せの位置を保ったまま下から */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}

/* トップの座席表の「席をタップ」: 輪が広がって消える */
@keyframes fv-pulse {
  0% {
    opacity: 1;
    transform: scale(0.6);
  }

  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

/* トップの座席表で押した席: 赤い輪が1回広がる */
@keyframes fv-ripple {
  0% {
    opacity: 0.9;
    transform: scale(0.4);
  }

  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* トップの座席表の枠と使い方の札: 最初に黄色い光が外へ広がって消える（目を引くため・3回だけ） */
@keyframes fv-attract {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 200, 61, 0.55);
  }

  70%,
  100% {
    box-shadow: 0 0 0 10px rgba(255, 200, 61, 0);
  }
}

@keyframes fv-attract-line {
  0% {
    border-color: rgba(255, 200, 61, 0.8);
  }

  100% {
    border-color: var(--fv-panel-line);
  }
}

/* トップの立体の下端の案内: 下向きの矢印が小さく上下する */
@keyframes fv-bob {
  50% {
    transform: translateY(2px);
  }
}

/* ゴールデンシートの光 */
@keyframes gold-pulse {
  50% {
    box-shadow:
      0 0 0 2px var(--gold-weak),
      0 0 20px 6px var(--gold-glow-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}