/* 試作E・F 共通の演出（運営者「出現のエフェクトが、ぬるっと動く・デジタルっぽくノイズから現れる」 2026-11-05）。
   出るときの1回だけ。ずっと動き続けるグリッチはしない。「動き 切」と prefers-reduced-motion では、最初から完成した状態で出す。 */
:root{
  --m-ease:cubic-bezier(.16,1,.3,1);   /* 強い減速（ぬるっと） */
  --m-dur:780ms;
}

/* ===== ぬるっと：下から覆いが外れる＋ぼけからくっきり＋少し下から ===== */
[data-motion="on"] [data-m="rise"]:not(.m-in),
[data-motion="on"] [data-m="fade"]:not(.m-in){opacity:0}
[data-motion="on"] [data-m="rise"]:not(.m-in){clip-path:inset(100% 0 0 0);transform:translateY(26px);filter:blur(6px)}
[data-motion="on"] [data-m="fade"]:not(.m-in){transform:translateY(22px)}
[data-motion="on"] [data-m="rise"].m-in{
  transition:opacity var(--m-dur) var(--m-ease) var(--m-delay,0ms),clip-path var(--m-dur) var(--m-ease) var(--m-delay,0ms),
    transform var(--m-dur) var(--m-ease) var(--m-delay,0ms),filter calc(var(--m-dur) * .8) var(--m-ease) var(--m-delay,0ms)}
/* サムネイル（公式の絵）はフェードとスライドだけ。ぼかし・切り抜き・ノイズはかけない */
[data-motion="on"] [data-m="fade"].m-in{transition:opacity 700ms var(--m-ease) var(--m-delay,0ms),transform 800ms var(--m-ease) var(--m-delay,0ms)}

/* 文字のスクランブル中は、幅が揺れないよう等幅の数字に */
.m-scr{font-variant-numeric:tabular-nums}
[data-motion="on"] [data-m="scramble"]:not(.m-in),[data-motion="on"] [data-m="count"]:not(.m-in){opacity:0}
[data-motion="on"] [data-m="scramble"].m-in,[data-motion="on"] [data-m="count"].m-in{opacity:1;transition:opacity 120ms linear var(--m-delay,0ms)}

/* ===== ノイズから現れる：絵は canvas でざらざらの点から（motion.js）。出る瞬間だけ走査線と色ずれ ===== */
[data-motion="on"] [data-m="noise"]:not(.m-in){opacity:0}
[data-m="noise"].m-busy{opacity:0!important}
.m-noise-cv{position:absolute;pointer-events:none;z-index:3;image-rendering:pixelated}
.m-glitch{position:relative;animation:m-rgb 150ms steps(2) 1}
.m-glitch::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.0) 0 2px,rgba(0,0,0,.18) 2px 3px);mix-blend-mode:multiply;animation:m-scan 150ms steps(3) 1}
@keyframes m-rgb{
  0%{filter:drop-shadow(3px 0 rgba(255,40,90,.75)) drop-shadow(-3px 0 rgba(0,210,255,.75));transform:translateX(2px)}
  50%{filter:drop-shadow(-2px 0 rgba(255,40,90,.6)) drop-shadow(2px 0 rgba(0,210,255,.6));transform:translateX(-1px)}
  100%{filter:none;transform:none}}
@keyframes m-scan{0%{opacity:1;transform:translateY(-2px)}100%{opacity:0;transform:translateY(2px)}}

/* 動きを止めたとき：最初から完成した状態 */
[data-motion="off"] [data-m]{opacity:1!important;clip-path:none!important;transform:none!important;filter:none!important;transition:none!important}
[data-motion="off"] .m-glitch,[data-motion="off"] .m-glitch::after{animation:none!important}
[data-motion="off"] .m-noise-cv{display:none}
@media (prefers-reduced-motion:reduce){.m-glitch,.m-glitch::after{animation:none!important}}