/* =========================================================
   全ページ共通の動き（site-fx.js と対で使用）
   - ファーストビューの流れ星・星空のパララックス
   - トップの縦書きコピーのアニメーション
   - トップ「新着記事」のホワイト系サイバーパンク背景（パララックス）
   動きを減らす設定の端末では、すべて静止表示になります。
   ========================================================= */

/* ---------- 流れ星・星空 ---------- */
.fx-sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fx-sky__stars{position:absolute;inset:-20% 0;background-image:radial-gradient(1.2px 1.2px at 33.1% 16.5%,rgba(255,255,255,0.55),transparent 70%),radial-gradient(1.5px 1.5px at 37.1% 7.6%,rgba(255,255,255,0.55),transparent 70%),radial-gradient(1.2px 1.2px at 43.6% 8.7%,rgba(123,229,233,0.55),transparent 70%),radial-gradient(1.5px 1.5px at 81.4% 13.9%,rgba(255,255,255,0.95),transparent 70%),radial-gradient(1.5px 1.5px at 6.8% 23.2%,rgba(164,224,189,0.95),transparent 70%),radial-gradient(2px 2px at 15.8% 13.3%,rgba(190,245,250,0.55),transparent 70%),radial-gradient(2px 2px at 57.8% 63.3%,rgba(255,255,255,0.55),transparent 70%),radial-gradient(2.4px 2.4px at 56.2% 61.4%,rgba(123,229,233,0.85),transparent 70%),radial-gradient(2px 2px at 46.7% 90.7%,rgba(164,224,189,0.7),transparent 70%),radial-gradient(1.5px 1.5px at 78.3% 69.1%,rgba(255,255,255,0.85),transparent 70%),radial-gradient(2.4px 2.4px at 52.4% 86.0%,rgba(164,224,189,0.55),transparent 70%),radial-gradient(2px 2px at 13.3% 42.1%,rgba(190,245,250,0.95),transparent 70%),radial-gradient(1.2px 1.2px at 42.5% 94.4%,rgba(164,224,189,0.85),transparent 70%),radial-gradient(2.4px 2.4px at 68.7% 59.1%,rgba(255,255,255,0.55),transparent 70%),radial-gradient(1.2px 1.2px at 92.7% 47.5%,rgba(255,255,255,0.85),transparent 70%),radial-gradient(2.4px 2.4px at 64.1% 97.3%,rgba(164,224,189,0.95),transparent 70%),radial-gradient(2.4px 2.4px at 87.2% 35.3%,rgba(164,224,189,0.7),transparent 70%),radial-gradient(1.5px 1.5px at 60.6% 49.4%,rgba(164,224,189,0.7),transparent 70%),radial-gradient(2.4px 2.4px at 72.9% 40.2%,rgba(255,255,255,0.7),transparent 70%),radial-gradient(1.5px 1.5px at 45.1% 54.7%,rgba(123,229,233,0.85),transparent 70%),radial-gradient(2.4px 2.4px at 69.8% 96.7%,rgba(190,245,250,0.7),transparent 70%),radial-gradient(1.5px 1.5px at 10.0% 16.5%,rgba(255,255,255,0.95),transparent 70%),radial-gradient(2px 2px at 81.8% 19.5%,rgba(255,255,255,0.7),transparent 70%),radial-gradient(2px 2px at 42.2% 37.4%,rgba(190,245,250,0.55),transparent 70%),radial-gradient(2.4px 2.4px at 45.8% 85.6%,rgba(123,229,233,0.95),transparent 70%),radial-gradient(2.4px 2.4px at 39.8% 48.2%,rgba(255,255,255,0.7),transparent 70%);background-size:100% 100%;transform:translate3d(0,var(--fx-stars,0px),0);animation:fx-twinkle 5s ease-in-out infinite alternate}
.fx-sky__glow{position:absolute;width:520px;height:520px;right:6%;top:-10%;border-radius:50%;background:radial-gradient(circle,rgba(37,217,226,.14),transparent 66%);filter:blur(10px);transform:translate3d(0,var(--fx-glow,0px),0)}
.fx-star{position:absolute;top:var(--t);left:var(--l);width:140px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(190,245,250,.95));filter:drop-shadow(0 0 6px rgba(123,229,233,.9));opacity:0;transform:rotate(-28deg) translateX(0);animation:fx-shoot var(--d,7s) linear var(--delay,0s) infinite}
.fx-star::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(190,245,250,.9)}
@keyframes fx-shoot{0%{opacity:0;transform:rotate(-28deg) translateX(-60px)}3%{opacity:1}12%{opacity:0;transform:rotate(-28deg) translateX(-420px)}100%{opacity:0;transform:rotate(-28deg) translateX(-420px)}}
@keyframes fx-twinkle{from{opacity:.55}to{opacity:1}}

.fixed-hero .fx-sky{inset:0 calc(50% - 50vw);background:radial-gradient(circle at 78% 30%,rgba(25,74,84,.55),transparent 45%),linear-gradient(rgba(128,207,211,.05) 1px,transparent 1px) 0 0/76px 76px,linear-gradient(90deg,rgba(128,207,211,.05) 1px,transparent 1px) 0 0/76px 76px}
/* ヒーロー内の文字を星空より前面に */
.corp .page-hero .wrap,.fixed-hero>*:not(.fx-sky),.fx-host-main{position:relative;z-index:1}
.fixed-hero{position:relative;overflow:visible}
body.fixed-page{overflow-x:clip}
/* 固定ページ：背景画像のパララックス */
.corp .page-hero{background-position:0 0,0 0,70% calc(40% + var(--fx-bg,0px))}
@media(max-width:640px){.corp .page-hero{background-position:0 0,center calc(0% + var(--fx-bg,0px))}}
/* 記事一覧・記事ページ：上部だけ星空を敷く */
.fx-top-sky{position:absolute;left:0;right:0;top:0;height:min(620px,90vh);z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}

/* ---------- トップ：縦書きコピー ---------- */
.hero-side-copy.fx-split{color:transparent}
.hero-side-copy.fx-split .fx-ch{display:inline-block;color:rgba(220,235,239,.78);opacity:0;filter:blur(6px);transform:translateY(-10px);animation:fx-ch-in .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * .12s + .6s)}
.hero-side-copy.fx-split .fx-ch.is-glow{animation:fx-ch-in .9s cubic-bezier(.2,.8,.2,1) forwards,fx-ch-glow 4.8s ease-in-out infinite;animation-delay:calc(var(--i) * .12s + .6s),calc(var(--i) * .18s + 2.4s)}
.hero-side-copy.fx-split::after{content:"";position:absolute;left:50%;top:calc(100% + 14px);width:1px;height:0;background:linear-gradient(#7be5e9,transparent);animation:fx-line 2.4s ease forwards 1.6s}
.hero-side-copy.fx-split{transform:translateY(calc(-50% + var(--fx-side,0px)))}
@keyframes fx-ch-in{to{opacity:1;filter:blur(0);transform:none}}
@keyframes fx-ch-glow{0%,72%,100%{color:rgba(220,235,239,.78);text-shadow:none}80%{color:#e9fdff;text-shadow:0 0 10px #7be5e9,0 0 22px rgba(123,229,233,.7)}}
@keyframes fx-line{to{height:70px}}

/* ---------- トップ：新着記事のホワイト系サイバーパンク背景 ---------- */
#latest.fx-latest{position:relative;overflow:hidden;isolation:isolate}
#latest.fx-latest>*:not(.fx-cyber){position:relative;z-index:2}
.fx-cyber{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#f7fbfc 0%,#eef4f6 100%)}
.fx-cyber__holo{position:absolute;inset:-20%;background:radial-gradient(40% 30% at 18% 22%,rgba(123,229,233,.42),transparent 70%),radial-gradient(34% 28% at 82% 30%,rgba(255,95,210,.26),transparent 70%),radial-gradient(42% 30% at 60% 88%,rgba(164,224,189,.38),transparent 70%);filter:blur(18px);transform:translate3d(0,var(--fx-l1,0px),0)}
.fx-cyber__circuit{position:absolute;inset:-25% 0;transform:translate3d(0,var(--fx-l2,0px),0)}
.fx-cyber__circuit svg{width:100%;height:100%;display:block}
.fx-trace path{fill:none;stroke:rgba(40,170,190,.38);stroke-width:1.6;stroke-linejoin:round}
.fx-pulse path{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:7 93;stroke-dashoffset:100;animation:fx-current linear infinite}
.fx-pulse .c{stroke:#16d3ea;filter:drop-shadow(0 0 4px #16d3ea) drop-shadow(0 0 10px rgba(22,211,234,.8))}
.fx-pulse .m{stroke:#ff3fc8;filter:drop-shadow(0 0 4px #ff3fc8) drop-shadow(0 0 10px rgba(255,63,200,.7))}
.fx-node circle{fill:#f7fbfc;stroke:rgba(40,170,190,.7);stroke-width:2}
.fx-node .n{fill:#16d3ea;stroke:none;animation:fx-node ease-in-out infinite}
@keyframes fx-current{to{stroke-dashoffset:0}}
@keyframes fx-node{0%,80%,100%{opacity:.35;r:4}88%{opacity:1;r:7}}
.fx-cyber__floor{position:absolute;left:-20%;right:-20%;bottom:-6%;height:62%;background-image:linear-gradient(rgba(37,190,210,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(37,190,210,.32) 1px,transparent 1px);background-size:56px 56px;transform:perspective(700px) rotateX(64deg) translate3d(0,var(--fx-l3,0px),0);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%);animation:fx-floor 5s linear infinite}
.fx-cyber__beam{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(transparent,rgba(37,190,210,.7),transparent);opacity:.7;animation:fx-beam 6s linear infinite}
.fx-cyber__beam:nth-child(4){left:14%;animation-delay:-1s}.fx-cyber__beam:nth-child(5){left:47%;animation-delay:-3.4s;background:linear-gradient(transparent,rgba(255,95,210,.55),transparent)}.fx-cyber__beam:nth-child(6){left:83%;animation-delay:-2.2s}
.fx-cyber__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.34) 50%,rgba(255,255,255,.6)),repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0 1px,transparent 1px 4px)}
@keyframes fx-floor{to{background-position:0 56px,0 0}}
@keyframes fx-beam{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

@media (prefers-reduced-motion:reduce){
  .fx-star,.fx-sky__stars,.fx-cyber__floor,.fx-cyber__beam,.fx-pulse path,.fx-node .n{animation:none}
  .fx-pulse{display:none}
  .fx-star{display:none}
  .hero-side-copy.fx-split .fx-ch{animation:none;opacity:1;filter:none;transform:none}
  .hero-side-copy.fx-split::after{animation:none;height:70px}
}

/* ---------- マウスポインタの水紋 ---------- */
.fx-ripple{position:fixed;left:0;top:0;z-index:9998;width:16px;height:16px;margin:-8px 0 0 -8px;border:1px solid rgba(123,229,233,.85);border-radius:50%;pointer-events:none;box-shadow:0 0 10px rgba(123,229,233,.45),inset 0 0 6px rgba(123,229,233,.3);animation:fx-ripple .9s cubic-bezier(.2,.7,.3,1) forwards;mix-blend-mode:screen}
.fx-ripple--light{border-color:rgba(30,150,170,.75);box-shadow:0 0 8px rgba(30,150,170,.35);mix-blend-mode:multiply}
.fx-ripple--click{width:22px;height:22px;margin:-11px 0 0 -11px;border-width:2px;animation-duration:1.1s}
.fx-ripple--click::after{content:"";position:absolute;inset:-2px;border:1px solid rgba(164,224,189,.7);border-radius:50%;animation:fx-ripple2 1.1s .12s cubic-bezier(.2,.7,.3,1) forwards;opacity:0}
@keyframes fx-ripple{0%{transform:translate3d(var(--rx),var(--ry),0) scale(.3);opacity:.95}100%{transform:translate3d(var(--rx),var(--ry),0) scale(3.4);opacity:0}}
@keyframes fx-ripple2{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}}
/* サイドコピーの線を文字の上へ */
.hero-side-copy-right.fx-split::after{top:auto;bottom:calc(100% + 14px);background:linear-gradient(transparent,#7be5e9)}