/* ZQ Stage4 — 演出（登場・BATTLE START・撃破・CLEAR） v0.1.0
 * 見た目の正本: shared/game/design/stage4-fx-MOCK.html
 * ★既存の見た目は変えない。動きだけを足す。この1組を外せば元に戻る。
 */

/* ================= 登場シーン ================= */
/* 出るまでは隠しておく（JSが .zqfx-ready を付けてから順に見せる） */
.zqfx-boot .armor .col,
.zqfx-boot #board .cell{opacity:0}

.zqfx-in-l{animation:zqfxL .5s cubic-bezier(.2,.9,.3,1) forwards}
.zqfx-in-u{animation:zqfxU .5s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes zqfxL{from{opacity:0;transform:translateX(-26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes zqfxU{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}

/* ラスボスがせり上がる */
#bgOgre.zqfx-rise svg{animation:zqfxRise 1.3s cubic-bezier(.16,.9,.3,1) both}
@keyframes zqfxRise{
  0%{opacity:0;transform:translateY(24vh) scale(1.14)}
  60%{opacity:1}
  100%{opacity:1;transform:none}}
#aura.zqfx-rise{animation:zqfxAura 1.1s ease-out both}
@keyframes zqfxAura{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* 地響き */
.zqfx-quake{animation:zqfxQuake .62s ease-out}
@keyframes zqfxQuake{
  0%,100%{transform:none}
  12%{transform:translate(-5px,3px)} 24%{transform:translate(5px,-3px)}
  36%{transform:translate(-4px,-2px)} 48%{transform:translate(4px,2px)}
  60%{transform:translate(-2px,1px)} 76%{transform:translate(2px,-1px)}}

/* ================= 中央の大きな文字 ================= */
#zqfx-cry{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0}
#zqfx-cry.zqfx-on{opacity:1}
#zqfx-cry .zqfx-big{font-size:clamp(40px,10vw,116px);font-weight:900;letter-spacing:.10em;line-height:1;
  text-align:center;
  background:linear-gradient(180deg,#fff6d8,#ffc74a 46%,#ff8a1f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,180,60,.75)) drop-shadow(0 5px 0 rgba(120,50,0,.55));
  font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP',sans-serif}
#zqfx-cry .zqfx-sub{margin-top:12px;font-size:clamp(12px,2vw,17px);font-weight:900;
  letter-spacing:.32em;color:#ffe9b8;opacity:.9;text-align:center}
.zqfx-go .zqfx-big{animation:zqfxCryGo 1.55s cubic-bezier(.16,.9,.28,1) both}
@keyframes zqfxCryGo{
  0%{opacity:0;transform:scale(2.4);filter:blur(14px)}
  22%{opacity:1;transform:scale(1);filter:blur(0)}
  70%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.1)}}
.zqfx-hold .zqfx-big{animation:zqfxCryHold 1s cubic-bezier(.16,.9,.28,1) both}
@keyframes zqfxCryHold{
  0%{opacity:0;transform:scale(2.2);filter:blur(12px)}
  45%{opacity:1;transform:scale(1);filter:blur(0)}
  100%{opacity:1;transform:scale(1)}}

#zqfx-flash{position:fixed;inset:0;z-index:139;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,240,200,.95),rgba(255,180,60,.35) 26%,transparent 62%)}
#zqfx-flash.zqfx-go{animation:zqfxFb .7s ease-out both}
@keyframes zqfxFb{0%{opacity:0;transform:scale(.4)}18%{opacity:1}100%{opacity:0;transform:scale(1.5)}}

#zqfx-rays{position:fixed;inset:0;z-index:138;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,220,140,.20) 0deg 3deg, transparent 3deg 9deg)}
#zqfx-rays.zqfx-go{animation:zqfxRy 1.5s ease-out both}
@keyframes zqfxRy{0%{opacity:0;transform:scale(.6) rotate(0)}20%{opacity:.85}
  100%{opacity:0;transform:scale(1.7) rotate(22deg)}}

/* ================= 撃破：カードが煌めく ================= */
.face.zqfx-spark{animation:zqfxSpark .9s ease-out}
@keyframes zqfxSpark{
  0%{filter:none;transform:none}
  18%{filter:brightness(2.6) saturate(.3);transform:scale(1.14)}
  46%{filter:brightness(1.2);transform:scale(1.02)}
  100%{filter:none;transform:none}}
.cell.zqfx-spark{animation:zqfxCell .9s ease-out}
@keyframes zqfxCell{
  0%{box-shadow:0 0 0 rgba(255,230,150,0)}
  25%{box-shadow:0 0 34px rgba(255,230,150,.85)}
  100%{box-shadow:0 0 0 rgba(255,230,150,0)}}
.zqfx-mote{position:fixed;z-index:135;width:7px;height:7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff,rgba(255,220,140,.15) 62%,transparent);
  animation:zqfxMote 1.5s ease-out forwards}
@keyframes zqfxMote{0%{opacity:0;transform:translateY(0) scale(.5)}
  15%{opacity:1}100%{opacity:0;transform:translateY(-150px) scale(1.3)}}

/* 動きを抑えたい人の設定を尊重する */
@media (prefers-reduced-motion: reduce){
  .zqfx-in-l,.zqfx-in-u,#bgOgre.zqfx-rise svg,#aura.zqfx-rise,
  .zqfx-quake,.face.zqfx-spark,.cell.zqfx-spark{animation:none!important;opacity:1!important}
  .zqfx-mote{display:none}
}

/* =========================================================================
 * ★オープニング（v0.9.8・Ryu指示 2026-08-15）
 *   真っ暗 → ラスボスがフロートイン → 記入欄・カード欄が出る → BATTLE START
 *   ここから下を消せば、これまでの「はじめから全部見えている」形に戻る。
 * ======================================================================= */

/* 幕。いちばん上にかぶせる。ミラボやモーダルより手前に置く */
#zqfx-veil{
  position:fixed; inset:0; z-index:9500; background:#04070f;
  pointer-events:none; opacity:0; transition:opacity .7s ease, background-color .7s ease;
}
#zqfx-veil.zqfx-veil-on{ opacity:1; }
/* ボスだけがうっすら見える濃さへ（真っ黒→少し透ける） */
#zqfx-veil.zqfx-veil-boss{
  background:rgba(4,7,15,.72);
  transition:opacity .9s ease, background-color .9s ease;
}
#zqfx-veil.zqfx-veil-off{ opacity:0; }

/* 幕が上がるまでは、盤面の中身を伏せておく（ボスと背景だけ見せる） */
.zqfx-opening #kingwrap,
.zqfx-opening .armorwrap,
.zqfx-opening .you,
.zqfx-opening .connbar,
.zqfx-opening #playerbar,
.zqfx-opening #heroes,
.zqfx-opening #miralaunch,
.zqfx-opening #zq-teamstat,
.zqfx-opening .zql-bar{ opacity:0 !important; }

/* 出てくるとき。上から順にふわりと */
.zqfx-showfld #kingwrap{ animation:zqfxFld .5s .00s both; }
.zqfx-showfld .armorwrap{ animation:zqfxFld .5s .10s both; }
.zqfx-showfld .you{ animation:zqfxFld .5s .30s both; }
.zqfx-showfld .connbar{ animation:zqfxFld .5s .55s both; }
.zqfx-showfld #playerbar{ animation:zqfxFld .5s .60s both; }
.zqfx-showfld #heroes{ animation:zqfxFld .5s .70s both; }
.zqfx-showfld #miralaunch,
.zqfx-showfld #zq-teamstat,
.zqfx-showfld .zql-bar{ animation:zqfxFld .5s .95s both; }
@keyframes zqfxFld{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ボスのフロートイン＝下から、ゆっくり浮かび上がる
   ★かける相手は **中の svg**（v0.9.9・Ryu指摘「ラスボスがずれた」2026-08-15）。
     v0.9.8 では器（#bgOgre）そのものに transform:translate(-50%) を掛けていた。
     #bgOgre は inset:0 の全画面の器で、中身は justify-content:center で真ん中に
     置いている＝器を動かすと**ラスボスごと画面の左へずれる**。
     しかも animation の both で終わったあとも掛かったままになるため、ずれが残った。
     中の svg だけを動かせば、真ん中の位置は器が決めたまま変わらない。 */
@keyframes zqfxFloat{
  0%{ opacity:0; transform:translateY(13%) scale(.88); filter:blur(7px) }
  55%{ opacity:.92; filter:blur(2px) }
  100%{ opacity:1; transform:none; filter:none }
}
#bgOgre.zqfx-float svg{ animation:zqfxFloat 1.5s cubic-bezier(.22,.8,.3,1) both; }

/* 動きを減らす設定の人には、幕だけ出してすぐ上げる */
@media (prefers-reduced-motion:reduce){
  #zqfx-veil{ transition:none; }
  #bgOgre.zqfx-float svg{ animation:none; }
  .zqfx-showfld #kingwrap,.zqfx-showfld .armorwrap,.zqfx-showfld .you,
  .zqfx-showfld .connbar,.zqfx-showfld #playerbar,.zqfx-showfld #heroes,
  .zqfx-showfld #miralaunch,.zqfx-showfld #zq-teamstat,.zqfx-showfld .zql-bar{ animation:none; }
}