/* =========================================================
   ガチャ演出の質を上げる追加（2026-11-13）
   ・飛び出すカットイン（奥と手前の2層＋集中線。切り抜きの立ち絵なら枠からはみ出す）
   ・カメラワーク（寄り・ぼけ・ヒットストップ）
   ・SSR の光の柱と映画の帯
   ・ホロのカード（虹色の模様＋ラメ。傾けると流れる）
   ※ 点滅は1秒に3回未満。「控えめ」モードでは寄り・帯・ラメの動きなし
   ========================================================= */

/* ---------- 飛び出すカットイン ---------- */
.gx-aki{height:260px;margin-top:-130px;overflow:visible}
.gx-aki .sl{position:absolute;inset:18px 0;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);pointer-events:none;opacity:.55;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg at 82% 50%,rgba(255,255,255,.9) 0 1.2deg,transparent 1.2deg 7deg);
  -webkit-mask-image:radial-gradient(ellipse 70% 120% at 82% 50%,transparent 18%,#000 55%);mask-image:radial-gradient(ellipse 70% 120% at 82% 50%,transparent 18%,#000 55%)}
.gx-aki.go .sl{animation:gxSl .12s steps(2) infinite}
@keyframes gxSl{50%{transform:rotate(1.5deg) scale(1.02)}}
.gx-aki .face{width:280px;height:260px;clip-path:polygon(18% 7%,100% 7%,100% 93%,0 93%);overflow:hidden}
.gx-aki .face img{position:absolute;inset:0;width:100%;height:100%}
.gx-aki .face .bk{filter:blur(6px) brightness(.7) saturate(1.4);transform:scale(1.5);opacity:.85}
.gx-aki .face .fr{filter:contrast(1.12) saturate(1.2) drop-shadow(0 0 14px var(--ac,#fff))}
.gx-aki.go .face .bk{animation:gxParaBk 1.5s cubic-bezier(.2,.9,.2,1) both}
.gx-aki.go .face .fr{animation:gxParaFr 1.5s cubic-bezier(.2,.9,.2,1) both}
@keyframes gxParaBk{0%{transform:scale(1.5) translateX(18%)}20%{transform:scale(1.5) translateX(2%)}100%{transform:scale(1.5) translateX(-6%)}}
@keyframes gxParaFr{0%{transform:translateX(60%) scale(1.15)}16%{transform:translateX(-3%) scale(1.06)}24%{transform:translateX(0) scale(1.08)}100%{transform:translateX(-2%) scale(1.12)}}
.gx-aki.hot .bubble{animation:gxBubHot .5s .2s cubic-bezier(.2,1.6,.4,1) both}
@keyframes gxBubHot{0%{transform:translateY(-50%) scale(.4) rotate(-6deg)}100%{transform:translateY(-50%) scale(1) rotate(-2deg)}}
/* 背景を切り抜いた立ち絵：枠から上下にはみ出して、手前に飛び出して見える */
.gx-aki.cutout .face{clip-path:none;overflow:visible;height:340px;margin-top:-40px}
.gx-aki.cutout .face .bk{display:none}
.gx-aki.cutout .face .fr{object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 18px var(--ac,#fff)) drop-shadow(8px 10px 0 rgba(0,0,0,.35))}
@media (max-width:640px){
  .gx-aki{height:190px;margin-top:-95px}.gx-aki .face{width:170px;height:190px}.gx-aki .bubble{right:165px}
  .gx-aki.cutout .face{height:250px;margin-top:-30px}
}

/* ---------- カメラワーク：寄り＋まわりがぼける → 一瞬止まる ---------- */
.gx-cap,.gx-circle,.gx-ring,.gx-bg{transition:transform .5s cubic-bezier(.3,0,.2,1),filter .4s}
.gx canvas,.gx-rays,.gx-steps,.gx-top{transition:filter .4s,opacity .4s}
.gx.zoom .gx-cap{transform:scale(1.55)}
.gx.zoom .gx-circle{transform:scale(1.35)}
.gx.zoom .gx-bg{transform:scale(1.4);opacity:.7}
.gx.zoom canvas,.gx.zoom .gx-rays,.gx.zoom .gx-steps{filter:blur(6px);opacity:.6}
.gx.zoom::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse 60% 55% at 50% 50%,transparent 40%,rgba(0,0,0,.75));animation:gxIn .3s both}
.gx.hitstop *{animation-play-state:paused!important}
.gx.hitstop .gx-cap{filter:drop-shadow(0 0 60px #fff) brightness(1.6)}

/* ---------- SSR：映画の帯と光の柱 ---------- */
.gx-bars{position:absolute;inset:0;pointer-events:none;z-index:6}
.gx-bars i{position:absolute;left:0;right:0;height:0;background:#000}
.gx-bars i:first-child{top:0}.gx-bars i:last-child{bottom:0}
.gx-bars.go i{animation:gxBars 2.6s cubic-bezier(.3,0,.2,1) both}
@keyframes gxBars{0%{height:0}18%,75%{height:11vh}100%{height:0}}
.gx-pillar{position:absolute;left:50%;top:0;bottom:0;width:0;pointer-events:none;z-index:1;opacity:0}
.gx-pillar i{position:absolute;left:50%;bottom:0;width:min(46vw,300px);height:100%;transform:translateX(-50%) scaleX(.1);transform-origin:50% 100%;
  background:linear-gradient(0deg,rgba(255,255,255,0) 0,rgba(255,247,200,.95) 30%,#fff 50%,rgba(255,236,160,.9) 75%,rgba(255,255,255,0));
  filter:blur(10px);mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent)}
.gx-pillar.go{opacity:1}
.gx-pillar.go i{animation:gxPillar 2.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes gxPillar{0%{transform:translateX(-50%) scaleX(.05) scaleY(0);opacity:1}22%{transform:translateX(-50%) scaleX(.18) scaleY(1)}40%{transform:translateX(-50%) scaleX(1.25) scaleY(1);opacity:1}100%{transform:translateX(-50%) scaleX(1.6) scaleY(1);opacity:0}}
.gx.mild .gx-pillar.go i{animation-duration:3.2s;filter:blur(16px)}

/* ---------- SSR・プレミアの確定動画（画面いっぱい。タップで飛ばせる） ---------- */
.gx-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:30;opacity:0;pointer-events:none;background:#000;transition:opacity .12s}
.gx-vid.on{opacity:1;pointer-events:auto;cursor:pointer}
/* 暗転中に重ねる一言（フリーズした画面に、ゆっくり浮かぶ） */
.gx-vtext{position:absolute;left:0;right:0;top:30%;z-index:31;margin:0;text-align:center;pointer-events:none;opacity:0;
  font-family:var(--gx-display,var(--serif));font-size:clamp(30px,7vw,64px);letter-spacing:.18em;color:#fff;
  text-shadow:0 0 12px #f2c65a,0 0 36px rgba(242,198,90,.8),0 3px 0 rgba(0,0,0,.6)}
.gx-vtext.on{animation:gxVText 1.3s cubic-bezier(.2,.8,.2,1) both}
@keyframes gxVText{0%{opacity:0;letter-spacing:.6em;filter:blur(10px)}25%{opacity:1;letter-spacing:.18em;filter:none}80%{opacity:1}100%{opacity:0;transform:scale(1.15);filter:blur(4px)}}

/* ---------- ホロのカード（SR・SSR） ---------- */
.gx-card .holo{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;mix-blend-mode:color-dodge;opacity:.45;
  background:repeating-linear-gradient(115deg,
      rgba(255,95,109,.55) 0%,rgba(255,195,113,.55) 4%,rgba(255,247,173,.6) 8%,rgba(122,255,196,.55) 12%,rgba(122,162,255,.55) 16%,rgba(196,155,255,.55) 20%,rgba(255,95,109,.55) 24%);
  background-size:300% 300%;background-position:var(--gx,50%) var(--gy,50%);
  -webkit-mask-image:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#000 0,rgba(0,0,0,.35) 45%,transparent 75%);mask-image:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#000 0,rgba(0,0,0,.35) 45%,transparent 75%)}
.gx-card.r-SR .holo{opacity:.3;filter:hue-rotate(40deg)}
.gx-card.prem .holo{opacity:.7}
.gx-card .sparkle{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;mix-blend-mode:color-dodge;opacity:.55;
  background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,240,180,.8) 0 .8px,transparent 1.4px);
  background-size:23px 29px,37px 31px;background-position:calc(var(--gx,50%) * .4) calc(var(--gy,50%) * .4),calc(var(--gx,50%) * -.6) calc(var(--gy,50%) * -.6);
  -webkit-mask-image:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#000 0,transparent 55%);mask-image:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#000 0,transparent 55%)}
.gx-card.r-SR .sparkle{opacity:.35}
.gx-holohint{font-size:12px;color:#e8e0ff;opacity:.75;letter-spacing:.08em;margin:2px 0 0;animation:gxHint .8s 1.2s both}
.gx.mild .gx-card .sparkle{display:none}
@media (prefers-reduced-motion:reduce){.gx.zoom .gx-cap,.gx.zoom .gx-circle{transform:none}.gx-bars{display:none}}