/* =========================================================================
   sky.css — the full-screen procedural sky (canvas) and the film-grain layer.
   Drawn by js/components/sky.js.
   ========================================================================= */

/* the canvas is drawn small and blurred up, so it is slightly oversized to hide the blurred edge */
#sky{position:fixed;inset:-4%;width:108%;height:108%;filter:blur(10px) saturate(1.05);transform:translate3d(0,0,0)}

/* fine grain over everything, for a printed / photographic feel */
.grain{position:fixed;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}