/* ===== ボス撃破の「隊員の大号令」・全国レイド開幕の「ワープゲート」(fx_events.js、2026-10-09) =====
   ガチャの試作 C(gacha_fx.css の .gx-cutin / .gx-allsplash)と A(_proto/gacha/a.html のゲート)の見た目を移したもの。
   白い明滅は使わない。color-mix・cqw は使わない(iOS 15)。 */

/* ── 隊員の大号令(ボス戦・スタードラゴン戦の画面の中、KO の上。操作はさまたげない) ── */
.ev-crew { position: absolute; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.ev-cut { position: absolute; left: -10%; right: -10%; height: 120px; margin-top: -60px; overflow: hidden; transform: skewY(-8deg);
  border-block: 4px solid #fff; box-shadow: 0 0 26px var(--c);
  background: repeating-linear-gradient(100deg, var(--c) 0 26px, rgba(255, 255, 255, .25) 26px 30px, var(--c) 30px 52px);
  animation: evCutL 1.7s cubic-bezier(.2, .8, .3, 1) both; }
.ev-cut.r { animation-name: evCutR; }
.ev-cut img { position: absolute; left: 14%; bottom: -14%; height: 128%; transform: skewY(8deg); filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .35)); }
.ev-cut.r img { left: auto; right: 14%; }
.ev-cut b { position: absolute; right: 14%; top: 12%; transform: skewY(8deg); font-size: 12px; font-weight: 900; background: #ffd400; color: #2a1a00; padding: 1px 8px; border-radius: 4px; }
.ev-cut.r b { right: auto; left: 14%; }
.ev-cut span { position: absolute; right: 15%; top: 52%; transform: translateY(-50%) skewY(8deg); font-size: 26px; font-weight: 900; color: #fff; -webkit-text-stroke: 1.5px #102040; text-shadow: 0 4px 0 #102040; white-space: nowrap; }
.ev-cut.r span { right: auto; left: 15%; }
@keyframes evCutL { 0% { transform: skewY(-8deg) translateX(-110%); } 10% { transform: skewY(-8deg) translateX(0); } 90% { transform: skewY(-8deg) translateX(3%); opacity: 1; } 100% { transform: skewY(-8deg) translateX(110%); opacity: 0; } }
@keyframes evCutR { 0% { transform: skewY(-8deg) translateX(110%); } 10% { transform: skewY(-8deg) translateX(0); } 90% { transform: skewY(-8deg) translateX(-3%); opacity: 1; } 100% { transform: skewY(-8deg) translateX(-110%); opacity: 0; } }
.ev-all { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 50%, #ffe680, #ff8a00 45%, #8a1a00 90%); animation: evAll 1.35s ease both; }
@keyframes evAll { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.ev-sl { position: absolute; top: -10%; bottom: -10%; width: 28%; overflow: hidden; transform: skewX(-12deg) translateY(-110%); border-inline: 3px solid #fff; background: var(--c);
  animation: evSl .22s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: var(--d); }
.ev-sl img { position: absolute; left: 50%; top: 50%; width: 200%; transform: translate(-50%, -50%) skewX(12deg); }
@keyframes evSl { to { transform: skewX(-12deg) translateY(0); } }
.ev-tt { position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; font-size: 42px; font-weight: 900; color: #fff; -webkit-text-stroke: 2px #4a1a00; text-shadow: 0 5px 0 #4a1a00, 0 0 20px #ffd700; letter-spacing: .04em;
  animation: evTt .3s cubic-bezier(.3, 1.6, .5, 1) .45s both; }
.ev-tt small { display: block; font-size: 26px; -webkit-text-stroke: 1px #4a1a00; }
@keyframes evTt { from { transform: scale(2.4); opacity: 0; } to { transform: none; opacity: 1; } }
.ev-crew.is-reduced .ev-cut, .ev-crew.is-reduced .ev-sl, .ev-crew.is-reduced .ev-tt { animation-duration: .01s; }

/* ── ワープゲート(全国レイドの開幕。body 直下の全画面、タップで飛ばせる) ── */
.ev-warp { position: fixed; inset: 0; z-index: 9300; overflow: hidden; cursor: pointer;
  background: radial-gradient(ellipse at 50% 40%, #1a0f45 0%, #0a0624 45%, #030112 100%); animation: evFadeIn .25s ease both; }
@keyframes evFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ev-neb { position: absolute; inset: -20%;
  background: radial-gradient(circle at 25% 30%, rgba(255, 70, 180, .2), transparent 32%), radial-gradient(circle at 75% 60%, rgba(60, 140, 255, .22), transparent 35%), radial-gradient(circle at 50% 85%, rgba(140, 60, 255, .18), transparent 40%);
  animation: evNeb 8s ease-in-out infinite alternate; }
@keyframes evNeb { from { transform: translate(-3%, -2%) scale(1); } to { transform: translate(3%, 2%) scale(1.08); } }
.ev-gate { --c1: #7ad7ff; --c2: #b28dff; --c3: #2a2a8a; position: absolute; left: 50%; top: 42%; width: 70vmin; height: 70vmin; max-width: 340px; max-height: 340px;
  transform: translate(-50%, -50%) scale(.15); animation: evGateIn .7s cubic-bezier(.2, .8, .3, 1.1) .05s both; }
@keyframes evGateIn { to { transform: translate(-50%, -50%) scale(1); } }
.ev-gate > i { position: absolute; border-radius: 50%; }
.ev-halo { inset: -22%; background: radial-gradient(circle, var(--c2) 0%, transparent 62%); opacity: .5; }
.ev-r1 { inset: 0; background: conic-gradient(from 0deg, var(--c1), transparent 18%, var(--c2) 33%, transparent 50%, var(--c1) 66%, transparent 83%, var(--c2));
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 69%, transparent 70%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 69%, transparent 70%); animation: evSpin 2.4s linear infinite; }
.ev-r2 { inset: -6%; background: repeating-conic-gradient(var(--c1) 0 2deg, transparent 2deg 9deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 66%, #000 67%, #000 70%, transparent 71%); animation: evSpin 6s linear infinite reverse; opacity: .85; }
.ev-r3 { inset: 9%; border: 2px dashed var(--c1); opacity: .5; animation: evSpin 4s linear infinite; }
.ev-core { inset: 16%; background: radial-gradient(circle, #fff 0%, var(--c1) 14%, var(--c2) 38%, var(--c3) 62%, #05021a 74%); box-shadow: 0 0 30px var(--c1), inset 0 0 30px #000; }
.ev-swirl { inset: 16%; background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, .55), transparent 25%, rgba(255, 255, 255, .35), transparent 55%, rgba(255, 255, 255, .5), transparent 80%); animation: evSpin 1s linear infinite; opacity: .7; }
@keyframes evSpin { to { transform: rotate(360deg); } }
/* 門が開く: 門がふくらんで画面いっぱいの光に(明滅ではなく1回の広がり) */
.ev-warp.open .ev-gate { animation: evGateOpen .8s cubic-bezier(.5, 0, .7, .4) both; }
@keyframes evGateOpen { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(6); opacity: .9; } }
.ev-wship { position: absolute; width: 64px; height: auto; top: 42%; filter: drop-shadow(0 0 6px rgba(80, 180, 255, .8)); opacity: 0; }
.ev-wship-poppy { left: -15%; animation: evShipL .75s cubic-bezier(.5, 0, .9, .6) .3s both; }
.ev-wship-valco { right: -15%; transform: scaleX(-1); animation: evShipR .75s cubic-bezier(.5, 0, .9, .6) .45s both; }
.ev-wship-flippy { left: 40%; top: 105%; animation: evShipB .75s cubic-bezier(.5, 0, .9, .6) .6s both; }
@keyframes evShipL { 0% { opacity: 1; transform: translate(0, 40px) scale(1); } 100% { opacity: 0; transform: translate(60vw, -10px) scale(.1); } }
@keyframes evShipR { 0% { opacity: 1; transform: scaleX(-1) translate(0, 40px) scale(1); } 100% { opacity: 0; transform: scaleX(-1) translate(60vw, -10px) scale(.1); } }
@keyframes evShipB { 0% { opacity: 1; transform: translate(0, 0) scale(1.2); } 100% { opacity: 0; transform: translate(0, -60vh) scale(.1); } }
.ev-cap { position: absolute; left: 0; right: 0; top: 70%; text-align: center; font-size: 28px; font-weight: 900; letter-spacing: .12em; color: #fff;
  text-shadow: 0 0 14px #7ad7ff, 0 0 4px #000; opacity: 0; animation: evCap .6s cubic-bezier(.3, 1.4, .5, 1) .95s both; }
.ev-cap small { display: block; font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: .35em; color: #9fe6ff; margin-bottom: 4px; }
@keyframes evCap { from { opacity: 0; transform: scale(1.6); letter-spacing: .5em; } to { opacity: 1; transform: none; } }
.ev-skip { position: absolute; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 12px; color: rgba(255, 255, 255, .6); }
.ev-warp.is-reduced *, .ev-warp.is-reduced .ev-gate { animation-duration: .01s !important; animation-iteration-count: 1 !important; }