/* Film-bay background: light leaks, grain, sprocket rails, vignette. Sits behind everything. */
#bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:
  radial-gradient(ellipse at 50% 0%,#171b22 0%,#0f1114 60%,#0b0c0f 100%)}
#bg i{position:absolute;display:block}
#bg .leak{width:80vmax;height:80vmax;border-radius:50%;will-change:transform}
#bg .l1{left:-28vmax;top:-30vmax;background:radial-gradient(circle,rgba(226,166,74,.30) 0%,rgba(226,166,74,.10) 38%,transparent 66%);animation:d1 28s ease-in-out infinite alternate}
#bg .l2{right:-30vmax;bottom:-34vmax;background:radial-gradient(circle,rgba(64,112,210,.32) 0%,rgba(64,112,210,.10) 40%,transparent 66%);animation:d2 34s ease-in-out infinite alternate}
#bg .l3{right:8vw;top:12vh;width:46vmax;height:46vmax;background:radial-gradient(circle,rgba(196,72,124,.16) 0%,transparent 64%);animation:d3 40s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(18vmax,12vmax) scale(1.15)}}
@keyframes d2{to{transform:translate(-16vmax,-10vmax) scale(1.1)}}
@keyframes d3{to{transform:translate(-22vw,26vh) scale(.85)}}

#bg .rail{top:0;bottom:0;width:38px;background-color:rgba(226,166,74,.035);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='48'%3E%3Crect x='10' y='14' width='18' height='20' rx='4' fill='%23ffffff' fill-opacity='.10'/%3E%3C/svg%3E");
  background-repeat:repeat-y;animation:run 14s linear infinite}
#bg .rl{left:0;border-right:1px solid rgba(255,255,255,.05)}
#bg .rr{right:0;border-left:1px solid rgba(255,255,255,.05);animation-direction:reverse}
@keyframes run{to{background-position:0 480px}}
@media (max-width:900px){#bg .rail{display:none}}

#bg .grain{inset:-120px;opacity:.10;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gr .8s steps(1) infinite}
@keyframes gr{0%{transform:translate(0,0)}17%{transform:translate(-40px,25px)}33%{transform:translate(30px,-50px)}50%{transform:translate(-20px,-30px)}67%{transform:translate(50px,20px)}83%{transform:translate(-30px,45px)}}

#bg .vig{inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(0,0,0,.55) 100%)}

@media (prefers-reduced-motion:reduce){#bg .leak,#bg .rail,#bg .grain{animation:none}}