/* ═══════════════════════════════════════════════
   effects.css — fullscreen horror FX layers
   ═══════════════════════════════════════════════ */

.layer-particles{position:absolute;inset:0;z-index:25;pointer-events:none;overflow:hidden}

/* ── vignette: darkens with chaos ── */
.fx-vignette{
  position:fixed;inset:0;z-index:70;pointer-events:none;
  background:
    radial-gradient(circle at 50% 52%,transparent 22%,rgba(2,4,7,.55) 62%,rgba(0,0,0,.95) 100%),
    radial-gradient(circle at 50% 52%,transparent 40%,rgba(80,0,10,.28) 100%);
  opacity:calc(var(--chaos)*.92);
  transition:opacity 1.2s ease;
  mix-blend-mode:multiply;
}
.fx-vignette.pulse{animation:vigPulse 1.4s ease-in-out}
@keyframes vigPulse{0%,100%{filter:none}50%{filter:brightness(2.2) saturate(3)}}

/* ── scanlines ── */
.fx-scanlines{
  position:fixed;inset:0;z-index:71;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.42) 0 1px,transparent 1px 3px);
  transition:opacity 1.2s;mix-blend-mode:multiply;
}
.fx-scanlines.on{opacity:calc(.16 + var(--chaos)*.42);animation:scanRoll 9s linear infinite}
@keyframes scanRoll{to{background-position:0 300px}}

/* ── grain ── */
.fx-grain{
  position:fixed;inset:-50%;z-index:72;pointer-events:none;opacity:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
  transition:opacity 1.2s;mix-blend-mode:overlay;
}
.fx-grain.on{opacity:calc(.1 + var(--chaos)*.34);animation:grainShift .6s steps(4) infinite}
@keyframes grainShift{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}
}

/* ── white/red flash ── */
.fx-flash{
  position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;background:#fff;
}
.fx-flash.go{animation:flashOut .32s ease-out}
.fx-flash.red{background:#ff1728}
@keyframes flashOut{0%{opacity:.85}100%{opacity:0}}

/* ── subliminal face ── */
.fx-face{
  position:fixed;inset:0;z-index:79;pointer-events:none;opacity:0;
  background:
    radial-gradient(ellipse 8vmin 3vmin at 38% 44%,#000 0 44%,transparent 62%),
    radial-gradient(ellipse 8vmin 3vmin at 62% 44%,#000 0 44%,transparent 62%),
    radial-gradient(ellipse 14vmin 4vmin at 50% 66%,#000 0 40%,transparent 66%),
    radial-gradient(circle at 50% 50%,rgba(150,30,30,.5),transparent 58%);
  filter:blur(2px);
}
.fx-face.blink{animation:faceBlink .42s steps(3)}
@keyframes faceBlink{0%{opacity:0}30%{opacity:.9}60%{opacity:.1}80%{opacity:.6}100%{opacity:0}}

/* ── global glitch on the stage ── */
.stage.glitching{animation:stageGlitch .34s steps(2) 2}
@keyframes stageGlitch{
  0%{filter:none;transform:translate3d(0,0,0)}
  25%{filter:hue-rotate(70deg) saturate(2.4);transform:translate3d(-7px,3px,0) skewX(1.6deg)}
  50%{filter:invert(.14) contrast(1.5);transform:translate3d(6px,-4px,0)}
  75%{filter:hue-rotate(-60deg);transform:translate3d(-3px,2px,0) skewY(1deg)}
  100%{filter:none;transform:translate3d(0,0,0)}
}
.stage.aberrate{filter:drop-shadow(2px 0 0 rgba(255,0,60,.55)) drop-shadow(-2px 0 0 rgba(0,220,255,.5))}
.stage.inverted{filter:invert(1) hue-rotate(180deg)}

/* ── toasts ── */
.layer-toasts{
  position:absolute;z-index:200;
  left:50%;bottom:calc(17% + env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;width:min(92vw,520px);
}
.toast{
  padding:9px 18px;border-radius:12px;font-size:clamp(11.5px,3.1vw,14px);font-weight:700;
  background:rgba(10,14,20,.92);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 26px rgba(0,0,0,.6);
  animation:toastIn .34s cubic-bezier(.2,1.4,.4,1),toastOut .4s ease-in forwards var(--life,2.6s);
  max-width:100%;text-align:center;
}
.toast.good{border-color:rgba(49,255,143,.4);color:#8bffc4;box-shadow:0 8px 26px rgba(0,0,0,.6),0 0 26px rgba(49,255,143,.2)}
.toast.bad{border-color:rgba(255,45,63,.45);color:#ffa8b1;box-shadow:0 8px 26px rgba(0,0,0,.6),0 0 26px rgba(255,45,63,.25)}
.toast.weird{border-color:rgba(200,120,255,.4);color:#e0b6ff;letter-spacing:.08em}
@keyframes toastIn{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-14px) scale(.96)}}

/* ═══════════ JUMP SCARE ═══════════ */
.jumpscare{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  background:#000;display:grid;place-items:center;overflow:hidden;
}
.jumpscare[hidden]{display:none}
.jumpscare .js-face{
  width:min(140vw,140vh);height:min(140vw,140vh);
  animation:jsZoom .5s cubic-bezier(.15,.9,.3,1) both,jsShake .07s steps(2) infinite;
  filter:contrast(1.5) saturate(1.3) drop-shadow(0 0 60px rgba(255,0,20,.8));
}
.jumpscare .js-face svg{width:100%;height:100%}
@keyframes jsZoom{from{transform:scale(.16) rotate(-6deg);opacity:.2}to{transform:scale(1.08);opacity:1}}
@keyframes jsShake{
  0%{margin:0 0}25%{margin:-9px 12px}50%{margin:8px -11px}75%{margin:-6px -9px}100%{margin:0 0}
}
.jumpscare.out{animation:jsOut .35s ease-in forwards}
@keyframes jsOut{to{opacity:0;filter:blur(24px)}}

@media (prefers-reduced-motion:reduce){
  .fx-grain.on,.fx-scanlines.on{animation:none}
  .stage.glitching{animation:none}
  .toast{animation:toastIn .2s ease,toastOut .3s ease forwards var(--life,2.6s)}
}