/* ネットの世界観の演出（背景・ホログラム・グリッチ）。動きは fx.js が付ける */

/* ---- 背景の層（うしろから、オーロラ → グリッド → 文字の雨） ---- */
.fx-grid, .fx-rain { position: fixed; inset: 0; pointer-events: none; }
.fx-grid {
  z-index: -2;
  background-image:
    linear-gradient(color-mix(in srgb, var(--blue) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 9%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 28%, #000 8%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 28%, #000 8%, transparent 78%);
  animation: fx-grid 40s linear infinite;
}
@keyframes fx-grid { to { background-position: 0 56px, 56px 0; } }
.fx-rain { z-index: -1; }

/* ---- ブラウン管のような走査線とゆっくり流れる光の帯 ---- */
.fx-scan {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none; overflow: hidden;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .04) 0 1px, transparent 1px 3px);
}
.fx-scan::after {
  content: ""; position: absolute; left: 0; right: 0; top: -160px; height: 160px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--blue) 8%, transparent), transparent);
  animation: fx-sweep 10s linear infinite;
}
@keyframes fx-sweep { to { transform: translateY(calc(100vh + 320px)); } }

/* ---- いちばん上の細い帯（ONLINE と、流れる文字） ---- */
.fx-ticker {
  position: relative; z-index: 11; display: flex; align-items: center; gap: 14px; height: 26px; padding: 0 14px;
  font: 11px/26px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; color: var(--sub);
  background: color-mix(in srgb, var(--bg2) 82%, transparent); border-bottom: 1px solid var(--line); overflow: hidden;
}
.fx-ticker .st { color: var(--blue); white-space: nowrap; }
.fx-ticker .st i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; animation: fx-blink 1.6s ease-in-out infinite; }
.fx-ticker .clock { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-ticker .mask { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fx-ticker .run { display: inline-flex; white-space: nowrap; animation: fx-run 70s linear infinite; }
.fx-ticker .run span { padding-right: 3em; }
@keyframes fx-run { to { transform: translateX(-50%); } }
@keyframes fx-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (max-width: 520px) { .fx-ticker .clock { display: none; } }

/* ---- 文字のグリッチ（ときどきだけ、色がずれてちらつく） ---- */
.fx-glitch { position: relative; display: inline-block; }
.fx-glitch::before, .fx-glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; letter-spacing: inherit;
}
.fx-glitch::before { color: #4ff0ff; animation: fx-g1 5.6s steps(1, end) infinite; }
.fx-glitch::after { color: #ff7ad9; animation: fx-g2 5.6s steps(1, end) infinite; }
@keyframes fx-g1 {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  91% { opacity: .85; transform: translate(-4px, 0); clip-path: inset(8% 0 58% 0); }
  93% { opacity: .85; transform: translate(3px, 1px); clip-path: inset(62% 0 6% 0); }
  95% { opacity: .75; transform: translate(-2px, 0); clip-path: inset(30% 0 40% 0); }
  97% { opacity: 0; }
}
@keyframes fx-g2 {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  92% { opacity: .85; transform: translate(4px, 0); clip-path: inset(48% 0 20% 0); }
  94% { opacity: .8; transform: translate(-3px, -1px); clip-path: inset(5% 0 70% 0); }
  96% { opacity: .7; transform: translate(2px, 0); clip-path: inset(70% 0 4% 0); }
  98% { opacity: 0; }
}

/* ---- 打ち込み風の 404 NOT FOUND ---- */
.fx-caret::after { content: "▌"; margin-left: 2px; animation: fx-blink 1s steps(1, end) infinite; }

/* ---- まるよの足もとのホログラム投影と、走る光 ---- */
.hero .art::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -2%; height: 20px; border-radius: 50%; z-index: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 75%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--blue) 50%, transparent), inset 0 0 14px color-mix(in srgb, var(--blue) 35%, transparent);
  animation: fx-ring 3.2s ease-in-out infinite;
}
@keyframes fx-ring { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
.hero .art::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  -webkit-mask: url(images/maruyo.png) center / 100% 100% no-repeat;
  mask: url(images/maruyo.png) center / 100% 100% no-repeat;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, #8fe3ff 75%, transparent) 50%, transparent) 0 0 / 100% 18% no-repeat;
  animation: fx-scan 4.8s ease-in-out infinite;
}
@keyframes fx-scan { 0% { background-position: 0 -10%; } 100% { background-position: 0 110%; } }

/* ---- カードにカーソルをのせると、四すみにホログラムの角がのびる ---- */
.card:hover, .flow li:hover {
  border-color: color-mix(in srgb, var(--blue) 65%, var(--line));
  background-image:
    linear-gradient(var(--blue), var(--blue)), linear-gradient(var(--blue), var(--blue)),
    linear-gradient(var(--blue), var(--blue)), linear-gradient(var(--blue), var(--blue)),
    linear-gradient(var(--blue), var(--blue)), linear-gradient(var(--blue), var(--blue)),
    linear-gradient(var(--blue), var(--blue)), linear-gradient(var(--blue), var(--blue));
  background-repeat: no-repeat;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
  animation: fx-corners .3s ease-out;
}
@keyframes fx-corners {
  from { background-size: 0 2px, 2px 0, 0 2px, 2px 0, 0 2px, 2px 0, 0 2px, 2px 0; }
}
.btn.primary { box-shadow: 0 0 18px color-mix(in srgb, var(--blue) 45%, transparent); }
.btn.primary:hover { box-shadow: 0 0 28px color-mix(in srgb, var(--blue) 70%, transparent); }
.brand i { box-shadow: 0 0 10px var(--blue); animation: fx-blink 2.4s ease-in-out infinite; }
::selection { background: var(--blue); color: #fff; }

/* ---- カーソルのホログラムキューブ（絵を描くキャンバス） ---- */
.fx-cursor { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
/* キューブがちゃんと描けているときだけ、本物のカーソルを隠す（fx.js が付けはずしする） */
@media (hover: hover) and (pointer: fine) {
  :root.fx-cur, :root.fx-cur * { cursor: none !important; }
}

/* ---- FX ボタン ---- */
.fx-toggle {
  font: inherit; font-size: 10px; letter-spacing: .12em; color: var(--blue); background: transparent; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--blue) 55%, transparent); border-radius: 4px; padding: 0 8px; line-height: 18px; white-space: nowrap;
}
.fx-toggle:hover { background: color-mix(in srgb, var(--blue) 18%, transparent); }
:root.fx-off .fx-rain, :root.fx-off .fx-cursor, :root.fx-off .fx-scan, :root.fx-off .fx-grid,
:root.fx-off .hero .art::before, :root.fx-off .hero .art::after { display: none; }

/* OS の『動きを減らす』設定でも、FX ボタンを切っていなければ演出は出す（右上のボタンで切れる） */