@layer overscan {
.ov-finish {
  position: relative;
  isolation: isolate;
  background-image: radial-gradient(
    ellipse 78% 78% at 50% 50%,
    transparent 38%,
    rgb(0 0 0 / var(--ov-vignette)) 100%
  );
  --ov-grain-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ov-finish > *:not(ov-field) {
  position: relative;
  z-index: 1;
}
.ov-finish::before,
.ov-finish::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ov-finish::before {
  z-index: 1;
  background-image: var(--ov-grain-tex);
  background-size: 120px 120px;
  mix-blend-mode: screen;
  opacity: var(--ov-grain);
  animation: ov-grain-drift 700ms steps(1) infinite;
}
.ov-finish::after {
  z-index: 2;
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(0 0 0 / var(--ov-scan-opacity)) 0 1px,
    transparent 1px var(--ov-scan-pitch)
  );
}
.ov-finish--viewport::before,
.ov-finish--viewport::after {
  position: fixed;
}
@keyframes ov-grain-drift {
  0%   { background-position: 0 0; }
  25%  { background-position: -37px 19px; }
  50%  { background-position: 23px -41px; }
  75%  { background-position: -13px -7px; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-finish::before { animation: none; }
}
}