/* zeroxkyle motion FX — overlay only. Does not change page background or layout.
   Drop into preview CSS (or link this file). Layers sit above atmosphere, below content. */

.zk-fx-layer{position:fixed;inset:0;pointer-events:none}
#zk-fx{z-index:1}
#zk-beam{
  z-index:2;left:0;top:0;width:90vmax;height:90vmax;
  transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle closest-side,rgba(255,206,92,.14),rgba(255,140,60,.045) 42%,transparent 68%);
}
body.zk-beam-on #zk-beam{opacity:1}
.zk-grain{
  z-index:3;inset:-50%;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation:zk-grain 8s steps(10) infinite;
}
@keyframes zk-grain{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-2%,3%)}
  20%{transform:translate(3%,-1%)}
  40%{transform:translate(2%,-3%)}
  60%{transform:translate(1%,-2%)}
  80%{transform:translate(3%,2%)}
}
@media (pointer:coarse){
  #zk-beam{display:none}
  .zk-grain{animation:none;inset:0;opacity:.04}
}
@media (prefers-reduced-motion:reduce){
  #zk-fx,#zk-beam,.zk-grain{display:none!important}
}