/* ORICTION Backstage FX（演出の三段盛り）。動く部分は html.fxm（JS有効＆モーション許可）配下のみ。
   既定（JS無効・reduced-motion）は静的な最終状態で本編が読める */

/* ===== 共通オーバーレイ ===== */
.fx-flash{position:fixed;inset:0;z-index:195;pointer-events:none;opacity:0;background:#fff}
.fx-burst{position:fixed;inset:0;width:100%;height:100%;z-index:180;pointer-events:none;display:none}
.fx-sky{position:absolute;inset:0;width:100%;height:100%;display:block}
html.fx-sky-on .bs-stars__a,html.fx-sky-on .bs-stars__b,html.fx-sky-on .bs-stars__c,html.fx-sky-on .bs-meteor{display:none}
.fx-crt{position:fixed;inset:0;z-index:120;pointer-events:none;display:none;overflow:hidden}
html.fxm .fx-crt{display:block;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.fx-crt i{position:absolute;inset:-60px;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:fx-grain .7s steps(5) infinite}
@keyframes fx-grain{0%{transform:translate(0,0)}20%{transform:translate(-24px,18px)}40%{transform:translate(30px,-12px)}60%{transform:translate(-14px,-30px)}80%{transform:translate(22px,26px)}100%{transform:translate(0,0)}}

/* ===== ネオン質感 ===== */
.bs-label{text-shadow:0 0 6px currentColor,0 0 18px rgba(255,255,0,.65),0 0 36px rgba(233,49,114,.5)}
html.fxm .bs-label{animation:fx-neon 6s linear infinite}
@keyframes fx-neon{0%,17%,23%,58%,63%,100%{opacity:1}19%{opacity:.35}21%{opacity:.8}60%{opacity:.5}}
.bs-h2{filter:drop-shadow(0 0 10px rgba(233,49,114,.5))}
/* url(#bs-acut)=index.html内のSVGフィルタ。素材全面に残る薄いアルファ(α<0.15)を0に落としてから影を付ける */
.bs-who img,.bs-ret__alien img,.bs-council__c img{filter:url(#bs-acut) drop-shadow(0 0 14px rgba(233,49,114,.5))}
.bs-hero__alien img,.bs-hero__pres img{filter:url(#bs-acut) drop-shadow(0 0 18px rgba(233,49,114,.55))}
.bs-hyper__pres img{filter:url(#bs-acut) blur(1.6px) drop-shadow(8px 0 0 rgba(233,49,114,.5)) drop-shadow(-8px 0 0 rgba(9,220,245,.5));-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.bs-hyper__alien img{filter:url(#bs-acut) drop-shadow(0 0 26px rgba(9,220,245,.8))}

/* ===== 切り抜き宇宙人の縁をフェード（明るい惑星の発光で矩形が見えるため） ===== */
.bs-who--run img{-webkit-mask-image:none;mask-image:none}
/* 切れた縁（右端・下端）は闇に溶かす */
.bs-council__c img,.bs-ret__pt{-webkit-mask-image:none;mask-image:none}

/* ===== 宇宙人を画面端に密着（素材は切り口が片側にある半身。p1/p3は反転して切り口を画面右端へ） ===== */
.bs-flipx{transform:scaleX(-1)}
.bs-scene--edge{--aw:clamp(180px,22vw,300px);--ah:clamp(320px,56vh,600px);overflow:clip;padding-bottom:calc(var(--ah) + 20px)}
.bs-scene--edge>.bs-who{position:absolute;right:0;bottom:0;z-index:2;display:block;width:auto;margin:0;pointer-events:none}
.bs-scene--edge>.bs-who img{display:block;width:auto;height:var(--ah);-webkit-mask-image:none;mask-image:none}
.bs-scene--edge>.bs-who .bs-say{position:absolute;right:calc(100% - 6px);top:9%;z-index:2;margin:0;width:max-content;white-space:nowrap;max-width:min(340px,calc(100vw - var(--aw) - 28px));font-size:clamp(16px,2.2vw,26px)}
.bs-scene--edge .bs-say::before{left:auto;right:-11px;border-color:var(--pink);border-left-width:0;border-bottom-width:0;border-top-width:2px;border-right-width:2px}
.bs-scene--edge .bs-say--pink::before{border-color:var(--yel)}
/* ハイパースペースの宇宙人: 右端に密着（切り口は右）。脚はスピード線に溶かす */
.bs-hyper__alien{position:absolute;right:0;bottom:0;z-index:2;width:clamp(200px,30vw,380px);pointer-events:none}
.bs-hyper__alien img{display:block;animation:fx-hover 3.6s ease-in-out infinite;-webkit-mask-image:none;mask-image:none}
@keyframes fx-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
html.fxm .bs-hyper__alien.is-in{opacity:calc(1 - max(0, var(--hp,0) - .7) * 3.4);transition:transform .8s cubic-bezier(.2,.8,.2,1)}

/* ===== 惑星（WebGL描画。成功時だけCSSの球・リングを隠す） ===== */
.bs-pgl{position:absolute;left:50%;top:50%;width:230%;height:230%;transform:translate(-50%,-50%);pointer-events:none;display:block}
.bs-pw.is-gl{--s:clamp(240px,min(58vh,38vw),540px)}
.bs-planet.is-gl{background:none;box-shadow:none}
.bs-planet.is-gl .bs-pat,.bs-pw.is-gl .bs-ring{display:none}

/* ===== カーソル ===== */
html.fx-cur body{cursor:none}
html.fx-cur a,html.fx-cur button{cursor:pointer}
.bs-ufo{filter:drop-shadow(0 0 8px rgba(9,220,245,.9))}
.bs-ufo.is-link{scale:1.35;filter:drop-shadow(0 0 10px rgba(255,255,0,.95)) hue-rotate(60deg)}
.fx-trail{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;z-index:149;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff 0,rgba(233,49,114,.85) 38%,rgba(9,220,245,0) 72%)}

/* ===== ワイプ ===== */
.fx-wipe{position:absolute;top:0;bottom:0;left:0;width:34%;z-index:6;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(233,49,114,0) 20%,rgba(233,49,114,.55) 46%,rgba(255,255,255,.95) 50%,rgba(9,220,245,.55) 54%,rgba(9,220,245,0) 80%,transparent);transform:translateX(-110%) skewX(-12deg);animation:fx-wipe 1.1s cubic-bezier(.6,0,.3,1) both}
@keyframes fx-wipe{to{transform:translateX(330%) skewX(-12deg)}}

/* ===== 叫びヒーローの衝撃 ===== */
html.fxm .bs-lt{display:inline-block;opacity:0}
html.fxm.bs-slam .bs-lt{animation:fx-slam .64s cubic-bezier(.2,.9,.3,1) calc(var(--i,0) * 42ms) both}
@keyframes fx-slam{0%{opacity:0;transform:translateY(-70px) scale(5) rotate(var(--lr,0deg))}45%{opacity:1;transform:translateY(8px) scale(.82) rotate(0)}70%{transform:scale(1.16)}100%{opacity:1;transform:none}}
html.fxm .bs-bubble.bs-hr{transform:scale(.3) rotate(-6deg);transition:opacity .15s,transform .4s cubic-bezier(.2,1.5,.4,1)}
html.fxm.bs-slam .bs-bubble{animation:fx-bub 1.1s ease-out}
@keyframes fx-bub{0%{box-shadow:0 0 0 2px rgba(233,49,114,.3),0 0 140px 30px rgba(255,255,255,.95),inset 0 0 90px rgba(255,255,255,.7)}100%{box-shadow:0 0 0 2px rgba(233,49,114,.3),0 0 40px rgba(233,49,114,.8),inset 0 0 40px rgba(233,49,114,.25)}}
html.fxm.bs-slam .bs-hero__alien{animation:fx-recoil-l 1.2s cubic-bezier(.2,.9,.3,1) both}
html.fxm.bs-slam .bs-hero__pres{animation:fx-recoil-r 1.2s cubic-bezier(.2,.9,.3,1) both}
@keyframes fx-recoil-l{0%{transform:translateX(-110px) rotate(-18deg) scale(.88)}35%{transform:translateX(16px) rotate(5deg) scale(1.03)}60%{transform:translateX(-8px) rotate(-2deg)}100%{transform:none}}
@keyframes fx-recoil-r{0%{transform:translateX(120px) rotate(16deg) scale(.88)}35%{transform:translateX(-16px) rotate(-5deg) scale(1.03)}60%{transform:translateX(8px) rotate(2deg)}100%{transform:none}}

/* ===== ハイパースペース ===== */
.bs-hyper__white{position:absolute;inset:0;z-index:3;display:block;background:#fff;opacity:0;pointer-events:none}
html.fxm .bs-hyper{height:260vh}
html.fxm .bs-hyper__stick{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
html.fxm .bs-hyper__in{opacity:calc(1 - max(0, var(--hp,0) - .7) * 3.4)}
html.fxm .bs-hyper__fly{transform-origin:50% 0;transform:scale(calc(1 + var(--hp,0) * .3))}
.bs-hyper__in .bs-h2{position:relative;z-index:4;-webkit-text-stroke:.09em var(--pink);text-shadow:0 0 18px rgba(255,255,0,.55),0 0 38px rgba(233,49,114,.9),.06em .06em 0 #000,0 0 6px #000}
html.fxm .bs-hyper__stick::after{z-index:2}

/* ===== 惑星（CSSの球体） ===== */
.bs-pw{--s:clamp(240px,min(66vh,44vw),620px);position:relative;width:var(--s);height:var(--s)}
.bs-pw .bs-planet{--s:inherit}
.bs-pat{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:block;pointer-events:none}
.bs-pat::before{content:"";position:absolute;left:0;top:0;width:200%;height:100%;background-size:50% 100%;animation:fx-roll 70s linear infinite}
.bs-pat::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,transparent 50%,rgba(0,0,0,.2) 76%,rgba(0,0,0,.55) 100%),radial-gradient(circle at 30% 24%,rgba(255,255,255,.4),transparent 38%)}
@keyframes fx-roll{to{transform:translateX(-50%)}}
.bs-planet--white .bs-pat::before{background-image:repeating-linear-gradient(180deg,transparent 0 8%,rgba(140,152,190,.3) 8% 11%,transparent 11% 19%,rgba(170,182,215,.38) 19% 25%),radial-gradient(ellipse 13% 7% at 22% 32%,rgba(130,142,180,.45),transparent),radial-gradient(ellipse 10% 6% at 70% 64%,rgba(130,142,180,.4),transparent),radial-gradient(ellipse 16% 5% at 48% 82%,rgba(150,160,200,.4),transparent)}
.bs-planet--text .bs-pat::before{animation-duration:46s;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 7%),repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 9%),radial-gradient(ellipse 20% 16% at 24% 34%,rgba(60,220,170,.85),transparent 100%),radial-gradient(ellipse 14% 20% at 68% 58%,rgba(60,220,170,.8),transparent 100%),radial-gradient(ellipse 10% 8% at 46% 80%,rgba(255,255,255,.55),transparent 100%)}
.bs-planet--pink .bs-pat::before{animation-duration:58s;background-image:radial-gradient(circle at 20% 30%,rgba(77,8,36,.55) 0 5%,transparent 5.6%),radial-gradient(circle at 62% 24%,rgba(77,8,36,.5) 0 3.4%,transparent 4%),radial-gradient(circle at 44% 66%,rgba(77,8,36,.55) 0 6.5%,transparent 7.2%),radial-gradient(circle at 82% 72%,rgba(77,8,36,.5) 0 4%,transparent 4.6%),repeating-linear-gradient(172deg,transparent 0 10%,rgba(255,170,205,.22) 10% 14%)}
.bs-ring{position:absolute;left:-20%;right:-20%;top:37%;bottom:37%;border-radius:50%;border:clamp(7px,1.4vw,16px) solid rgba(200,225,255,.75);transform:rotate(-14deg);pointer-events:none;box-shadow:0 0 22px rgba(200,225,255,.5)}
.bs-pw--pink .bs-ring{left:-10%;right:-10%;top:34%;bottom:34%;border-color:rgba(255,255,0,.85);box-shadow:0 0 28px rgba(255,255,0,.6);transform:rotate(-18deg)}
.bs-ring--b{clip-path:inset(0 -6% 50% -6%)}
.bs-ring--f{clip-path:inset(50% -6% 0 -6%)}
.fx-dust{position:absolute;bottom:3%;width:var(--sz,30px);height:var(--sz,30px);margin-left:calc(var(--sz,30px) / -2);border-radius:50%;pointer-events:none;z-index:4;animation:fx-dust 1.1s ease-out both}
@keyframes fx-dust{0%{opacity:.95;transform:translate(0,0) scale(.3)}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(2.6)}}
.fx-thud{animation:fx-thud .6s ease-out}
@keyframes fx-thud{0%{transform:scale(1.05,.94)}40%{transform:scale(.98,1.03)}100%{transform:none}}

/* ===== 着陸シーケンス ===== */
html.fxm .bs-scene__in{position:relative;z-index:1}
/* ハイパースペースの白からの受け渡し。着陸(is-land)したら消す＝拡大した白い惑星の上端が洗われないように */
html.fxm .bs-scene--white::before{content:"";position:absolute;left:0;right:0;top:0;height:24vh;z-index:0;pointer-events:none;background:linear-gradient(#fff,rgba(255,255,255,0))}
html.fxm .bs-scene--white.is-land::before{animation:fx-whiteout 1.4s ease-out .3s both}
@keyframes fx-whiteout{to{opacity:0}}
html.fxm .bs-scene .bs-scene__pl{opacity:0}
.bs-scene__ch{position:relative;z-index:3}
.bs-scene__pl{position:relative;z-index:1}
html.fxm .bs-scene.is-land .bs-scene__pl{animation:fx-arrive 1.3s cubic-bezier(.12,.85,.2,1) both}
@keyframes fx-arrive{0%{opacity:0;transform:translateY(-16vh) scale(.06);filter:blur(8px)}30%{opacity:1;filter:blur(0)}78%{transform:scale(1.08)}100%{opacity:1;transform:none;filter:none}}
html.fxm .bs-scene:not(.is-land) .bs-who{opacity:0}
html.fxm .bs-scene.is-land .bs-who{animation:fx-drop .95s cubic-bezier(.3,0,.3,1) 1.05s both}
@keyframes fx-drop{0%{opacity:0;transform:translateY(-260px) rotate(-18deg) scale(.8)}30%{opacity:1}58%{transform:translateY(0) scale(1.12,.78)}78%{transform:translateY(-26px) scale(1)}100%{opacity:1;transform:none}}
html.fxm .bs-scene:not(.is-land) .bs-say{opacity:0}
html.fxm .bs-scene.is-land .bs-say{animation:fx-pop .45s cubic-bezier(.2,1.8,.4,1) 1.85s both}
@keyframes fx-pop{0%{opacity:0;transform:scale(.3) rotate(-8deg)}100%{opacity:1;transform:none}}

/* ===== 宇宙人会議 ===== */
html.fxm .fx-cb{opacity:0;transform:scale(.3) rotate(calc(var(--rot,0deg) - 25deg));transition:opacity .25s,transform .45s cubic-bezier(.2,1.6,.4,1)}
html.fxm .fx-cb.is-in{opacity:1;transform:rotate(var(--rot,0deg))}
.tw-v{position:absolute;inset:0;padding:inherit;pointer-events:none}
.tw-on .tw-o{color:transparent}
.tw-g .tw-v{color:var(--cyan);text-shadow:2px 0 #ff2bd6,-2px 0 #09dcf5;letter-spacing:.03em}
.bs-council__c img.is-talk,.bs-seats img.is-talk{animation:fx-talk .4s ease-out}
@keyframes fx-talk{0%{transform:none}35%{transform:translateY(-16px) scale(1.06,.94)}70%{transform:translateY(2px) scale(.97,1.03)}100%{transform:none}}

/* ===== 帰還 ===== */
.bs-ret__in{position:relative;z-index:1}
.bs-ret__orbit i{animation:fx-orbit 220s linear infinite}
@keyframes fx-orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
.bs-ret__heat{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse 85% 75% at 50% 100%,rgba(255,240,150,.55),rgba(255,90,20,.45) 35%,rgba(180,20,10,.3) 60%,transparent 82%)}
html.fxm .bs-ret.is-heat .bs-ret__heat{animation:fx-heat .85s ease-in both}
@keyframes fx-heat{0%{opacity:0}25%{opacity:.9}45%{opacity:.5}65%{opacity:1}100%{opacity:1}}
.bs-ret{overflow-x:clip}
.bs-land{--L:clamp(300px,34vw,400px);grid-column:1/-1;position:relative;height:var(--L);margin-top:10px}
.bs-land__sky{position:absolute;inset:-170px -60vw -140px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 74%,transparent);mask-image:linear-gradient(180deg,transparent,#000 24%,#000 74%,transparent)}
.bs-earth{position:absolute;left:50%;top:calc(170px + var(--L) * .52);width:min(190vw,1900px);aspect-ratio:1/1;margin-left:calc(min(190vw,1900px) / -2);border-radius:50%;overflow:hidden;background:linear-gradient(180deg,#58b4ff 0,#1f6fe0 2.5%,#0b3c9a 9%,#06174a 22%,#02082a 45%);box-shadow:0 0 0 3px rgba(150,205,255,.55),0 0 60px 14px rgba(90,170,255,.55),0 0 170px 50px rgba(60,120,255,.35)}
.bs-earth__cl{position:absolute;left:0;top:0;width:200%;height:100%;background-size:50% 100%;animation:fx-roll 160s linear infinite;background-image:radial-gradient(ellipse 9% 2.6% at 14% 3.5%,#2fa55f 0,#2fa55f 55%,transparent 100%),radial-gradient(ellipse 6% 2.2% at 40% 5.5%,#35b36a 0,#35b36a 55%,transparent 100%),radial-gradient(ellipse 11% 2.8% at 68% 3.2%,#2a9a58 0,#2a9a58 55%,transparent 100%),radial-gradient(ellipse 7% 1.5% at 28% 2.2%,rgba(255,255,255,.75),transparent 100%),radial-gradient(ellipse 9% 1.4% at 56% 6.5%,rgba(255,255,255,.7),transparent 100%),radial-gradient(ellipse 8% 1.4% at 84% 5%,rgba(255,255,255,.7),transparent 100%)}
html.fxm .bs-earth{transform:translateY(62%);transition:transform 1.5s cubic-bezier(.15,.8,.2,1)}
html.fxm .bs-land.is-rise .bs-earth{transform:none}
html.fxm .bs-ret.is-hit .bs-earth{animation:fx-glow 1.1s ease-out}
@keyframes fx-glow{0%{box-shadow:0 0 0 6px #fff,0 0 120px 40px rgba(255,255,255,.95),0 0 260px 90px rgba(120,190,255,.8)}100%{box-shadow:0 0 0 3px rgba(150,205,255,.55),0 0 60px 14px rgba(90,170,255,.55),0 0 170px 50px rgba(60,120,255,.35)}}
.bs-land__card{position:absolute;left:50%;bottom:26px;z-index:2;width:min(430px,78vw);margin-left:calc(min(430px,78vw) / -2);overflow:hidden;border-radius:12px;background:#fff;color:#223;transform:rotate(-3deg);box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 3px rgba(255,255,255,.25),0 0 60px rgba(120,190,255,.55)}
html.fxm .bs-land:not(.is-card) .bs-land__card{opacity:0}
html.fxm .bs-land.is-card .bs-land__card{animation:fx-card .85s cubic-bezier(.3,.1,.3,1) both}
@keyframes fx-card{0%{opacity:0;transform:translateY(-320px) rotate(-16deg)}15%{opacity:1}58%{transform:translateY(0) rotate(-1deg) scale(1.05,.92)}80%{transform:translateY(-14px) rotate(-4deg) scale(1)}100%{opacity:1;transform:rotate(-3deg)}}
.bs-lc__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#eef0f5;border-bottom:1px solid #d9dce6}
.bs-lc__bar i{display:block;width:9px;height:9px;border-radius:50%;background:#c8ccd9}
.bs-lc__bar span{margin-left:8px;font:600 11px/1 var(--font-d);color:#667}
.bs-lc__body{padding:20px 22px 22px;text-align:left}
.bs-lc__body b{display:block;font-family:var(--font-d);font-weight:900;font-size:30px;line-height:1.2;color:#0a2a66}
.bs-lc__body p{margin:6px 0 14px;font-size:13px;line-height:1.6;font-weight:700;color:#334}
.bs-lc__body u{display:block;height:8px;margin-top:8px;border-radius:4px;background:#e4e7ef}
.bs-lc__body u:nth-child(4){width:82%}.bs-lc__body u:nth-child(5){width:58%}
html.fxm .bs-ret:not(.is-ready) .bs-btns{opacity:0;pointer-events:none}
html.fxm .bs-ret.is-ready .bs-btns{animation:fx-pop .55s cubic-bezier(.2,1.8,.4,1) both}

/* ===== SP ===== */
@media (max-width:760px){
  .bs-pw{--s:min(78vw,320px)}
  .bs-ring{left:-14%;right:-14%}
  html.fxm .bs-hyper{height:230vh}
  .bs-council__stage .bs-cb{position:relative;left:auto;right:auto;top:auto;max-width:calc(100vw - 48px);margin-left:12px;margin-right:12px}
  .bs-land{--L:300px}
  .bs-lc__body b{font-size:24px}
  html.fxm .bs-scene--white::before{height:18vh}
  .bs-pw.is-gl{--s:min(60vw,250px)}
  .bs-scene--edge{--aw:46vw;--ah:min(90vw,380px);padding-bottom:calc(var(--ah) + 12px)}
  .bs-scene--edge>.bs-who .bs-say{top:6%;font-size:16px;padding:10px 14px;white-space:normal;max-width:calc(100vw - var(--aw) - 20px)}
  .bs-hyper__alien{width:52vw}
}

/* ===== reduced motion: 動きは全部止め、静的な最終状態 ===== */
@media (prefers-reduced-motion:reduce){
  .bs-land__card,.bs-earth{transform:none!important}
  .bs-label{animation:none}
}