/* =========================================================
   ローディング画面
   画像は public/img/loading/ から毎回ランダム（実写 / アニメ）。
   画像をそのまま見せ、下端の細いライン + 小さな「読み込み中」だけで状態を示す。
   参加者・管理画面 共通。JS 無効時は表示しない。
   ========================================================= */
.loading {
  position: fixed; inset: 0; z-index: 2000;
  background: #0a0c10;
  opacity: 1; visibility: visible;
  transition: opacity .28s ease, visibility 0s linear 0s;
}
.loading.is-hidden { opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s; pointer-events: none; }

.loading__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
  animation: loading-zoom 6s ease-out both;
}

/* 下端: 文字の可読性のためのごく薄いグラデーションのみ */
.loading__foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 48px 20px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(10,12,16,0), rgba(10,12,16,.45));
  color: #fff; pointer-events: none;
}
.loading__cap { font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.loading__dots { display: inline-flex; gap: 4px; }
.loading__dots i { width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .35; animation: loading-dot 1.4s ease-in-out infinite; }
.loading__dots i:nth-child(2) { animation-delay: .2s; }
.loading__dots i:nth-child(3) { animation-delay: .4s; }

.loading__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.18); }
.loading__bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, rgba(255,255,255,0), #fff, rgba(255,255,255,0)); animation: loading-slide 1.4s ease-in-out infinite; }

@keyframes loading-zoom { from { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes loading-dot { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes loading-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

@media (prefers-reduced-motion: reduce) {
  .loading__img, .loading__dots i, .loading__bar i { animation: none; }
}