/* =====================================================================
   モーション（モーション案の実装）
   ・要素を隠すのは JS 側だけ。CSSでは隠さないので、JSが動かない環境でも
     内容は必ず表示される
   ・prefers-reduced-motion では全て無効化する
   ===================================================================== */

/* ---- キーフレーム ---- */
@keyframes gmLoaderOut { 0%, 64% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes gmLoaderBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gmLoaderMark { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes gmCharRise { from { opacity: 0; transform: translateY(.9em) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes gmKenburns {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  50%  { transform: scale(1.13) translate3d(-1.6%, -1.2%, 0); }
  100% { transform: scale(1.04) translate3d(0, 0, 0); }
}
@keyframes gmSteam {
  0%   { transform: translateY(8%) scale(1); opacity: 0; }
  22%  { opacity: .5; }
  100% { transform: translateY(-42%) scale(1.5); opacity: 0; }
}
@keyframes gmHint { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(7px); opacity: 1; } }

/* ---- イントロローダー ---- */
.gm-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--c-bg, #131110);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  animation: gmLoaderOut 1.35s cubic-bezier(.7, 0, .2, 1) forwards;
}
.gm-loader-mark {
  display: flex; align-items: baseline; gap: 10px;
  animation: gmLoaderMark .7s cubic-bezier(.16, 1, .3, 1) both;
}
.gm-loader-mark b {
  font-family: var(--font-display, serif); font-weight: 400;
  font-size: clamp(24px, 4vw, 38px); letter-spacing: .12em; color: var(--c-text, #EEF0F1);
}
.gm-loader-mark span {
  font-family: var(--font-mono, monospace); font-size: 10px;
  letter-spacing: .3em; color: var(--c-muted, #8A8F93);
}
.gm-loader-bar { width: min(220px, 46vw); height: 2px; background: var(--c-line, #2A2827); overflow: hidden; }
.gm-loader-bar i {
  display: block; width: 100%; height: 100%; background: var(--c-accent, #C98232);
  transform-origin: left; animation: gmLoaderBar 1s cubic-bezier(.4, 0, .2, 1) both;
}

/* ---- ヒーロー見出しの文字送り ---- */
.gm-char { display: inline-block; white-space: pre; animation: gmCharRise .9s cubic-bezier(.16, 1, .3, 1) both; }
/* 英単語のかたまり。途中で改行させない */
.gm-word { display: inline-block; white-space: nowrap; }

/* ---- 背景写真のゆっくりズーム ---- */
.gm-kenburns { animation: gmKenburns 40s ease-in-out infinite; transform-origin: 50% 62%; will-change: transform; }

/* ---- 湯気（装飾。文字の下に敷く） ---- */
.gm-steam { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.gm-steam i {
  position: absolute; display: block; border-radius: 50%; filter: blur(48px);
  background: radial-gradient(circle, rgba(232, 110, 58, .16) 0%, rgba(232, 110, 58, 0) 68%);
  animation: gmSteam 15s ease-in-out infinite;
}
.gm-steam i:nth-child(2) {
  filter: blur(54px);
  background: radial-gradient(circle, rgba(238, 240, 241, .09) 0%, rgba(238, 240, 241, 0) 70%);
  animation-duration: 19s; animation-delay: 3.5s;
}
.gm-steam i:nth-child(3) { animation-duration: 23s; animation-delay: 7s; }

/* ---- スクロールの合図 ---- */
.gm-hint {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .3em;
  color: var(--c-muted, #8A8F93); animation: gmHint 2.4s ease-in-out infinite;
}
.gm-hint::after { content: ''; width: 1px; height: 26px; background: currentColor; opacity: .5; }

/* ---- 動きを減らす設定のときは全部止める ---- */
@media (prefers-reduced-motion: reduce) {
  .gm-loader { display: none !important; }
  .gm-char, .gm-kenburns, .gm-steam i, .gm-hint { animation: none !important; }
  .gm-word { display: inline; }
  .gm-char { opacity: 1 !important; transform: none !important; }
  .gm-steam { display: none !important; }
}