/* 2日目・3日目の画面エフェクト（glitch.mjs と組で使う）。操作の邪魔をしないよう、すべて pointer-events:none */

/* 以前の固定ノイズは、この演出に置き換える */
.day-2::before,.day-2::after,.day-3::before,.day-3::after{content:none!important}

#fx-layer{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.2s ease}
#fx-layer.on{opacity:1}
#fx-grain{position:absolute;inset:-2px;background-size:256px 256px;mix-blend-mode:overlay}
#fx-lines{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}
#fx-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(20,8,14,.16) 2px 3px)}
#fx-vignette{position:absolute;inset:0}
#fx-tint{position:absolute;inset:0;mix-blend-mode:multiply;opacity:0}

.fx-l2 #fx-grain{opacity:.16}
.fx-l2 #fx-scan{opacity:.4}
.fx-l2 #fx-vignette{background:radial-gradient(ellipse at 50% 45%,transparent 62%,rgba(30,14,24,.3) 100%)}

.fx-l3 #fx-grain{opacity:.24}
.fx-l3 #fx-scan{opacity:.65}
.fx-l3 #fx-vignette{background:radial-gradient(ellipse at 50% 45%,transparent 58%,rgba(60,0,12,.42) 100%);animation:fx-breathe 4.8s ease-in-out infinite}
.fx-l3 #fx-tint{background:#b3102a}

@keyframes fx-breathe{50%{opacity:.78}}

/* 乱れの瞬間：画面ごと横にずれて色が割れる */
#app.fx-burst{filter:url(#fx-tear)}
#app.fx-shake{transform:translate(var(--fx-dx,0),var(--fx-dy,0))}

@media (prefers-reduced-motion: reduce){
  .fx-l3 #fx-vignette{animation:none}
}