/* =============================
   css/fx.css
   ============================= */
/* ===== efeitos globais: transição de íris, luz/vinheta e grão ===== */
@property --r{syntax:"<percentage>";inherits:false;initial-value:0%}

/* transição "íris" de desenho animado entre cenas */
#wipe{position:absolute;inset:0;z-index:60;pointer-events:none;opacity:0;--r:0%;
  background:radial-gradient(circle at 50% 56%,transparent var(--r),var(--y) var(--r) calc(var(--r) + 3.5%),#111 calc(var(--r) + 3.5%))}
#wipe.go{opacity:1;animation:wipeOpen .6s cubic-bezier(.55,.05,.25,1) forwards}
@keyframes wipeOpen{0%{--r:0%;opacity:1}99%{--r:96%;opacity:1}100%{--r:96%;opacity:0}}

/* iluminação: vinheta suave + luz vinda de cima + grão de filme */
#grade{position:absolute;inset:0;z-index:50;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 42%,transparent 58%,rgba(24,10,44,.30) 100%),
    linear-gradient(180deg,rgba(255,244,205,.10),transparent 38%,rgba(20,10,40,.10) 100%)}
#grade::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:grain .9s steps(4) infinite}
@keyframes grain{25%{transform:translate(-14px,9px)}50%{transform:translate(11px,-12px)}75%{transform:translate(-8px,-6px)}}
/* cenas de final têm a própria iluminação */
#game.cine #grade{display:none}