/* ORICTION Backstage — 宇宙の旅（宇宙船の航行・ワープ・日本着陸）
   既定＝静的な最終状態。html.fxm（JS有効かつモーション許可）のときだけスクロール連動で動く。 */

/* ---------- 航路インジケーター（右端固定・JSで生成） ---------- */
.bs-route{position:fixed;right:18px;top:50%;z-index:55;height:min(58vh,520px);width:20px;transform:translateY(-50%);pointer-events:none;opacity:0;transition:opacity .5s}
.bs-route.is-on{opacity:1}
.bs-route__line{position:absolute;left:9px;top:0;bottom:0;width:2px;border-radius:2px;background:rgba(255,255,255,.18)}
.bs-route__done{position:absolute;left:9px;top:0;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--cyan),var(--pink));box-shadow:0 0 10px rgba(9,220,245,.8);height:calc(var(--rp,0) * 100%)}
.bs-route__dot{position:absolute;left:6px;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#05030f;border:2px solid rgba(255,255,255,.45)}
.bs-route__dot.is-past{border-color:var(--yel);background:var(--yel);box-shadow:0 0 8px rgba(255,255,0,.8)}
.bs-route__dot span{position:absolute;right:18px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.5);opacity:0;transition:opacity .3s}
.bs-route__dot.is-now span{opacity:1;color:var(--yel);text-shadow:0 0 8px rgba(0,0,0,.9),0 0 2px #000}
.bs-route__ship{position:absolute;left:-12px;width:44px;height:auto;top:calc(var(--rp,0) * 100%);transform:translateY(-50%) rotate(-8deg);filter:drop-shadow(0 0 8px rgba(9,220,245,.9))}
@media (max-width:760px){
  .bs-route{right:6px;width:14px;height:44vh}
  .bs-route__line,.bs-route__done{left:6px;width:2px}
  .bs-route__dot{left:3px;width:6px;height:6px;margin-top:-3px;border-width:1.5px}
  .bs-route__dot span{display:none}
  .bs-route__ship{left:-9px;width:30px}
}

/* ---------- ハイパー：宇宙船（JSでtransform） ---------- */
.bs-hship{position:absolute;left:5%;bottom:9%;z-index:1;width:clamp(230px,30vw,470px);pointer-events:none;will-change:transform}
.bs-hship img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 22px rgba(9,220,245,.55))}
.bs-hship__jet{position:absolute;left:18%;right:22%;bottom:-2%;height:34%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,120,220,.95),rgba(233,49,114,.55) 45%,rgba(233,49,114,0));filter:blur(6px);opacity:calc(.55 + var(--hp,0) * .45)}
.bs-hhud{position:absolute;left:clamp(16px,4vw,48px);top:clamp(78px,11vh,110px);z-index:4;margin:0;font-family:var(--font-d);color:var(--cyan);letter-spacing:.14em;font-size:12px;font-weight:800;text-shadow:0 0 10px rgba(9,220,245,.8)}
.bs-hhud b{display:block;font-size:clamp(30px,4vw,52px);letter-spacing:.02em;color:#fff;line-height:1.05;text-shadow:0 0 14px rgba(9,220,245,.9),0 0 2px #000}
.bs-hhud small{font-size:12px;color:var(--yel);letter-spacing:.1em}
.bs-hwarp{position:absolute;left:50%;top:50%;z-index:4;margin:0;transform:translate(-50%,-50%) scale(.6);opacity:0;font-family:var(--font-d);font-weight:900;font-style:italic;font-size:clamp(56px,11vw,170px);letter-spacing:.04em;color:#fff;-webkit-text-stroke:.04em var(--cyan);text-shadow:-.06em 0 0 rgba(233,49,114,.85),.06em 0 0 rgba(9,220,245,.85),0 0 40px rgba(255,255,255,.8);pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.bs-hyper.is-warp .bs-hwarp{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (max-width:760px){
  .bs-hship{left:2%;bottom:12%;width:50vw}
}

/* ---------- 移動区間（惑星と惑星のあいだ） ---------- */
.bs-leg{position:relative;z-index:2;height:clamp(320px,62vh,600px);overflow:hidden;pointer-events:none;--lp:.5}
.bs-leg__s{position:absolute;left:0;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85));opacity:.55;transform:translateX(calc(var(--x0) * 1vw - var(--lp) * var(--k) * 160vw))}
.bs-leg__s.c{background:linear-gradient(90deg,rgba(9,220,245,0),rgba(9,220,245,.9))}
.bs-leg__s.p{background:linear-gradient(90deg,rgba(233,49,114,0),rgba(255,120,190,.9))}
.bs-leg__hud{position:absolute;left:50%;top:13%;z-index:2;transform:translateX(-50%);text-align:center;width:max-content;max-width:calc(100% - 32px)}
.bs-leg__nx{margin:0;font-weight:900;font-size:clamp(26px,4.2vw,54px);line-height:1.2;color:var(--yel);-webkit-text-stroke:.07em var(--pink);paint-order:stroke fill;text-shadow:0 0 18px rgba(255,255,0,.5),0 0 34px rgba(233,49,114,.8),.05em .05em 0 #000}
.bs-leg__nx span{display:inline-block;margin-right:.4em;padding:.1em .45em;border:2px solid var(--cyan);border-radius:6px;font-family:var(--font-d);font-size:.42em;letter-spacing:.18em;vertical-align:middle;color:var(--cyan);-webkit-text-stroke:0;text-shadow:0 0 10px rgba(9,220,245,.9)}
.bs-leg__dist{margin:10px 0 0;font-family:var(--font-d);font-weight:800;font-size:14px;letter-spacing:.14em;color:rgba(255,255,255,.75)}
.bs-leg__dist b{font-size:22px;color:#fff;letter-spacing:.02em;margin:0 .2em;text-shadow:0 0 10px rgba(9,220,245,.9)}
.bs-leg__ship{position:absolute;left:0;top:50%;z-index:1;width:clamp(170px,24vw,340px);transform:translateX(calc(var(--lp) * (100vw + 100%) - 100%)) rotate(-5deg)}
.bs-leg__ship img{position:relative;display:block;width:100%;height:auto;animation:bs-vy-bob 2.4s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(9,220,245,.55))}
.bs-leg__trail{position:absolute;right:62%;top:40%;width:70vw;height:42%;border-radius:50%;background:linear-gradient(90deg,rgba(233,49,114,0),rgba(233,49,114,.35) 55%,rgba(255,150,230,.85));filter:blur(10px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(180deg,transparent,#000 35%,#000 65%,transparent)}
@keyframes bs-vy-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:760px){
  .bs-leg{height:clamp(280px,52vh,440px)}
  .bs-leg__hud{top:10%}
  .bs-leg__ship{width:46vw;top:52%}
  .bs-leg__dist b{font-size:18px}
}

/* ---------- 日本に降り立つ ---------- */
.bs-jp{position:relative;z-index:2;background:#000}
.bs-jp__stick{position:relative;height:100vh;height:100svh;overflow:hidden}
.bs-jp__layer{position:absolute;inset:0;will-change:transform,opacity}
.bs-jp__layer img{display:block;width:100%;height:100%;object-fit:cover}
.bs-jp__earth img{object-position:46.5% 33%}
.bs-jp__earth{transform-origin:46.5% 33%;opacity:0}
.bs-jp__win img{object-position:54.7% 51.5%}
.bs-jp__win{transform-origin:54.7% 51.5%;opacity:0}
.bs-jp__city img{object-position:50.5% 62%}
.bs-jp__city{transform-origin:50.5% 62%}
.bs-jp__city::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(5,3,15,.85))}
.bs-jp__heat{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(255,180,60,0) 35%,rgba(255,110,30,.55) 70%,rgba(255,60,20,.9));mix-blend-mode:screen}
.bs-jp__ship{position:absolute;left:50%;top:38%;z-index:3;width:clamp(200px,26vw,400px);margin-left:calc(clamp(200px,26vw,400px) / -2);pointer-events:none;will-change:transform}
.bs-jp__ship img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 0 24px rgba(9,220,245,.6))}
.bs-jp__beam{position:absolute;left:50%;top:62%;width:150%;height:min(52vh,460px);transform:translateX(-50%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(160,250,255,.85),rgba(9,220,245,.35) 55%,rgba(9,220,245,0));filter:blur(2px);opacity:1}
.bs-jp__hud{position:absolute;left:clamp(16px,4vw,48px);top:clamp(78px,11vh,110px);z-index:4;font-family:var(--font-d);color:var(--cyan);text-shadow:0 0 10px rgba(9,220,245,.8),0 0 2px #000}
.bs-jp__hud p{margin:0}
.bs-jp__ph{font-size:12px;font-weight:800;letter-spacing:.18em}
.bs-jp__alt{margin-top:4px!important;font-size:13px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.8)}
.bs-jp__alt b{font-size:clamp(28px,3.6vw,46px);color:#fff;letter-spacing:.02em;margin-right:.15em}
.bs-jp__co{margin-top:6px!important;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--yel)}
.bs-jp__cap{position:absolute;left:50%;bottom:clamp(30px,9vh,90px);z-index:4;margin:0;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;padding:12px 22px;border:2px solid var(--yel);border-radius:18px;background:rgba(10,8,0,.78);color:var(--yel);font-weight:900;font-size:clamp(17px,2.2vw,26px);box-shadow:0 0 22px rgba(255,255,0,.45);opacity:0;transition:opacity .35s}
.bs-jp__cap.is-on{opacity:1}
.bs-jp__end{position:absolute;left:0;right:0;bottom:clamp(36px,10vh,110px);z-index:4;text-align:center;padding:0 16px}
.bs-jp__end .bs-h2--xl{margin:0}
.bs-jp__place{margin:10px 0 0;font-family:var(--font-d);font-weight:800;font-size:clamp(16px,2vw,24px);letter-spacing:.32em;color:#fff;text-shadow:0 0 14px rgba(9,220,245,.9),0 0 2px #000}
.bs-jp__lead{margin:12px 0 0;font-weight:700;font-size:clamp(14px,1.6vw,18px);color:rgba(255,255,255,.9);text-shadow:0 0 8px #000,0 0 2px #000}
/* 静的（JS無し・reduced-motion）＝渋谷に着陸済みの1枚 */
html:not(.fxm) .bs-jp__hud,html:not(.fxm) .bs-jp__cap{display:none}
html:not(.fxm) .bs-jp__ship{top:30%}
/* 動く時：高さを取ってsticky */
html.fxm .bs-jp{height:460vh}
html.fxm .bs-jp__stick{position:sticky;top:0}
html.fxm .bs-jp__earth{opacity:1}
html.fxm .bs-jp__city,html.fxm .bs-jp__end{opacity:0}
html.fxm .bs-jp__beam{opacity:0}
@media (max-width:760px){
  html.fxm .bs-jp{height:400vh}
  .bs-jp__ship{width:60vw;margin-left:-30vw}
  .bs-jp__hud{top:72px}
}

/* 宇宙人の光彩が境目で四角く切れないよう、縦方向は切らない（横はみ出し対策の clip は維持） */
.bs-scene--edge{overflow:clip visible}

/* ---------- 吹き出しの仕上げ（v3）: 不透明の地＋しっぽは同色の菱形・外側2辺だけ枠 ---------- */
body .bs-say.bs-say{--sc:var(--pink);background:#0d0820;border-color:var(--sc)}
body .bs-say.bs-say--pink,body .bs-say.bs-say--yel{--sc:var(--yel)}
body .bs-say.bs-say--yel{background:#171400;color:var(--yel);box-shadow:0 0 22px rgba(255,255,0,.45)}
body .bs-say.bs-say::before{left:-10px;right:auto;top:auto;bottom:16px;width:17px;height:17px;background:inherit;border:0 solid var(--sc);border-width:0 0 2px 2px;transform:rotate(45deg)}
body .bs-scene--edge .bs-who .bs-say::before{left:auto;right:-10px;border-width:2px 2px 0 0}
/* 社長の「聞こえてるぞ。」＝社長の頭上に乗せ、しっぽは下向き */
body .bs-say.bs-say--top{position:absolute;right:6%;top:-8px;left:auto;margin:0;z-index:3;transform:rotate(4deg);white-space:nowrap;font-size:clamp(16px,1.8vw,24px);padding:10px 18px}
body .bs-say.bs-say--top::before{left:30px;bottom:-10px;border-width:0 2px 2px 0}
@media (max-width:760px){
  body .bs-say.bs-say--top{right:4%;top:-14px;font-size:15px;padding:8px 14px}
}

/* ---------- 航海日誌（物語のつなぎ） ---------- */
.bs-log{margin:0 0 10px;font-family:var(--font-d);font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--cyan);text-shadow:0 0 10px rgba(9,220,245,.7)}
.bs-log b{color:#fff;margin-right:.6em}
.bs-council__agenda{margin:-4px 0 0;font-weight:800;font-size:clamp(14px,1.5vw,18px);color:rgba(255,255,255,.85)}
.bs-council__res{position:relative;z-index:3;margin:clamp(28px,5vw,56px) auto 0;width:fit-content;max-width:calc(100% - 32px);padding:16px 26px;border:2px solid var(--yel);border-radius:14px;background:#171400;text-align:center;font-weight:900;font-size:clamp(18px,2.4vw,30px);line-height:1.45;color:var(--yel);box-shadow:0 0 26px rgba(255,255,0,.35)}
.bs-council__res small{display:block;margin-bottom:4px;font-family:var(--font-d);font-size:12px;letter-spacing:.24em;color:var(--cyan)}
.bs-jp__rev{margin:18px 0 0;font-weight:900;font-size:clamp(20px,2.8vw,36px);line-height:1.4;color:var(--yel);-webkit-text-stroke:.06em var(--pink);paint-order:stroke fill;text-shadow:0 0 18px rgba(255,255,0,.45),0 0 2px #000,.05em .05em 0 #000}
html.fxm .bs-jp__end{bottom:clamp(24px,7vh,80px)}

/* ---------- ワープを長く・大きく（v3） ---------- */
html.fxm .bs-hyper{height:460vh}
html.fxm .bs-hyper__in{opacity:calc(1 - max(0, var(--hp,0) - .5) * 9)}
html.fxm .bs-hyper__alien.is-in{opacity:calc(1 - max(0, var(--hp,0) - .5) * 9)}
.bs-htun{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;overflow:hidden}
.bs-htun i{position:absolute;left:50%;top:50%;width:70vmax;height:70vmax;margin:-35vmax 0 0 -35vmax;border-radius:50%;border:3px solid var(--pink);box-shadow:0 0 34px var(--pink),inset 0 0 34px var(--pink);will-change:transform,opacity}
.bs-htun i.c{border-color:var(--cyan);box-shadow:0 0 34px var(--cyan),inset 0 0 34px var(--cyan)}
.bs-htun i.y{border-color:#fff27a;box-shadow:0 0 30px #fff27a,inset 0 0 30px #fff27a}
.bs-htun::after{content:"";position:absolute;left:50%;top:50%;width:46vmin;height:46vmin;margin:-23vmin 0 0 -23vmin;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(190,240,255,.75) 30%,rgba(9,220,245,0));animation:bs-vy-core .5s ease-in-out infinite alternate}
@keyframes bs-vy-core{to{transform:scale(1.18);opacity:.8}}
.bs-hgauge{position:absolute;left:50%;top:clamp(80px,11vh,112px);z-index:4;width:min(440px,64vw);margin:0;transform:translateX(-50%);opacity:0;text-align:center;font-family:var(--font-d);font-weight:800;color:var(--cyan);letter-spacing:.2em;font-size:12px;text-shadow:0 0 10px rgba(9,220,245,.8)}
.bs-hgauge i{display:block;height:12px;margin:8px 0 6px;border:2px solid var(--cyan);border-radius:8px;overflow:hidden;box-shadow:0 0 14px rgba(9,220,245,.6)}
.bs-hgauge i b{display:block;height:100%;width:calc(var(--g,0) * 100%);background:linear-gradient(90deg,var(--cyan),#fff,var(--pink));box-shadow:0 0 16px #fff}
.bs-hgauge span{font-size:clamp(20px,2.4vw,30px);letter-spacing:.04em;color:#fff}
.bs-hgauge.is-full span{color:var(--yel);text-shadow:0 0 14px rgba(255,255,0,.9)}
.bs-hcount{position:absolute;left:50%;top:50%;z-index:5;margin:0;transform:translate(-50%,-50%);font-family:var(--font-d);font-weight:900;font-size:clamp(150px,26vw,360px);line-height:1;color:#fff;-webkit-text-stroke:.03em var(--pink);text-shadow:0 0 30px rgba(9,220,245,.9),0 0 80px rgba(233,49,114,.8);opacity:0;pointer-events:none}
.bs-hcap{position:absolute;left:50%;bottom:clamp(30px,8vh,80px);z-index:4;margin:0;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:12px 22px;border:2px solid var(--yel);border-radius:18px;background:#171400;color:var(--yel);font-weight:900;font-size:clamp(16px,1.8vw,22px);box-shadow:0 0 22px rgba(255,255,0,.4);opacity:0;transition:opacity .25s}
.bs-hcap.is-on{opacity:1}
@media (max-width:760px){
  html.fxm .bs-hyper{height:400vh}
  .bs-hgauge{top:clamp(140px,20vh,176px);width:78vw}
  .bs-hcap{bottom:auto;top:clamp(150px,22vh,190px);font-size:15px;padding:10px 16px}
}
html:not(.fxm) .bs-htun,html:not(.fxm) .bs-hgauge,html:not(.fxm) .bs-hcount,html:not(.fxm) .bs-hcap{display:none}
.bs-ret .bs-h2--xl{font-size:clamp(30px,4.6vw,60px)}
/* 文字送り: 黒い待ち時間を詰める（EPISODE 0 の直後から下端に文字が見える位置で始める） */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.bs-rm) .bs-crawl__text{transform:translate(-50%,0) translateY(58vh)}
  html.js:not(.bs-rm) .bs-crawl.is-play .bs-crawl__text{animation-duration:40s;animation-delay:3s}
}
@keyframes bs-crawl{from{transform:translate(-50%,0) translateY(58vh)}to{transform:translate(-50%,-102%)}}
@media(max-width:760px){html.fxm .bs-jp__end{padding:20px 16px;background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(5,3,15,.78),rgba(5,3,15,0) 100%)}}

/* SP最適化: ロゴのタップ領域・NEXTの最小文字 */
@media(max-width:760px){.bs-head__logo{display:inline-flex;align-items:center;min-height:44px}.bs-leg__nx span{font-size:max(11px,.42em)}}