/* overlays.css — moving “box/grid” background + noise + sheen */
.gridglow,.noise,.sheen{position:fixed;inset:0;pointer-events:none}
.gridglow{
  z-index:0;opacity:.28;
  background:
    linear-gradient(to right, rgba(255,122,24,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:56px 56px;
  transform:perspective(900px) rotateX(58deg) translateY(170px) scale(1.25);
  mix-blend-mode:screen;
  -webkit-mask-image: radial-gradient(720px 520px at 50% 10%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 72%);
  mask-image: radial-gradient(720px 520px at 50% 10%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 72%);
  animation:gridshift 10s linear infinite;
}
@keyframes gridshift{0%{background-position:0 0,0 0}100%{background-position:0 560px,560px 0}}
.noise{
  z-index:0;opacity:.10;
  background:
    radial-gradient(1200px 600px at 50% 20%, rgba(255,255,255,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
  animation:drift 18s linear infinite;
}
@keyframes drift{0%{transform:translate3d(-1%,-1%,0)}50%{transform:translate3d(1%,1%,0)}100%{transform:translate3d(-1%,-1%,0)}}
.sheen{
  z-index:1;inset:-40%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px),
    radial-gradient(900px 450px at 50% 50%, rgba(255,122,24,.05), transparent 60%),
    radial-gradient(800px 520px at 20% 70%, rgba(255,255,255,.03), transparent 60%);
  mix-blend-mode:overlay;opacity:.25;
  transform:rotate(8deg);
  animation:drift2 18s linear infinite;
}
@keyframes drift2{0%{transform:translate3d(-2%,-2%,0) rotate(8deg)}50%{transform:translate3d(2%,2%,0) rotate(8deg)}100%{transform:translate3d(-2%,-2%,0) rotate(8deg)}}

/* IMPORTANT: do NOT override header position here */
body>main, body>footer{position:relative;z-index:2}
header{z-index:60}