/*!
 * asbsb-canvas.css — canvas の演出（fx-drift / fx-globe）の器。相方 = asbsb-canvas.js（変数の一覧もそちら）。
 * ★canvas は器の中で一番奥（z-index:-1＋isolation）＝器の中の文字・ボタンの位置指定を一切変えずに、その後ろに描く。
 * ★器の既定（位置・地）は :where() で詳細度 0＝このファイルはサイトの CSS より後に読まれても、サイト側の指定（absolute で置く等）が必ず勝つ。
 */
:where(.fx-drift, .fx-globe) { position: relative; isolation: isolate; }
.fx-drift > .fx-canvas, .fx-globe > .fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; pointer-events: none; }

/* drift: JS が描くまで・JS が無い時も同じ色の地（空白にしない） */
:where(.fx-drift) { background: linear-gradient(60deg, var(--fx-drift-from, #060925), var(--fx-drift-mid, #1e257d) 62%, var(--fx-drift-to, #4a55b8)); }

/* 入ってくる時の拭き出し（右から左へ）＝CSS だけ（JS の有無に関係なく一度だけ）。速さ --fx-drift-reveal(1.6s) */
@media (prefers-reduced-motion: no-preference) {
  .fx-drift.fx-drift-wipe { animation: fx-drift-wipe var(--fx-drift-reveal, 1.6s) cubic-bezier(.77, 0, .18, 1) .15s both; }
}
@keyframes fx-drift-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }