:root{--bg:#050506;--ease:cubic-bezier(.32,.72,0,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);overflow:hidden;color-scheme:dark}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#gl{position:fixed;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 2.4s var(--ease)}
.is-ready #gl{opacity:1}

/* vignette + film grain, inert */
.veil{
  position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 50%,transparent 50%,rgba(0,0,0,.75) 100%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;
  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 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion:reduce){#gl{transition-duration:.01s}}