.gdf {
  --ground-1: #ffffff;
  --ground-2: #f0f1ed;
  --rule: 20, 22, 26;
  --major: 76px;
  --minor: 19px;
  --major-a: 0.08;
  --minor-a: 0.029;
  --sheen-a: 0.9;
  --sheen-dur: 12s;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(var(--ground-1) 0%, var(--ground-2) 100%);
}

.gdf--dark {
  --ground-1: #212127;
  --ground-2: #141417;
  --rule: 232, 232, 230;
  --major-a: 0.06;
  --minor-a: 0.022;
  --sheen-a: 0.16;
}

.gdf--light {
  --ground-1: #ffffff;
  --ground-2: #f0f1ed;
  --rule: 20, 22, 26;
  --major-a: 0.08;
  --minor-a: 0.029;
  --sheen-a: 0.9;
}

.gdf--page {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  pointer-events: none;
}

.gdf__grid,
.gdf__canvas,
.gdf__sheen,
.gdf__vignette,
.gdf__grain {
  pointer-events: none;
}

.gdf__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(var(--rule), var(--major-a)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--rule), var(--major-a)) 1px, transparent 1px),
    linear-gradient(rgba(var(--rule), var(--minor-a)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--rule), var(--minor-a)) 1px, transparent 1px);
  background-size:
    var(--major) var(--major),
    var(--major) var(--major),
    var(--minor) var(--minor),
    var(--minor) var(--minor);
  -webkit-mask-image: radial-gradient(105% 105% at 50% 40%, #000 18%, transparent 96%);
  mask-image: radial-gradient(105% 105% at 50% 40%, #000 18%, transparent 96%);
}

.gdf__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.gdf__sheen {
  position: absolute;
  top: -30%;
  bottom: -30%;
  right: -56%;
  width: 50%;
  z-index: 2;
  filter: blur(12px);
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(46, 90, 140, 0.09) 44%,
    rgba(255, 255, 255, var(--sheen-a)) 55%,
    rgba(20, 22, 26, 0.04) 63%,
    transparent 100%
  );
  animation: gdf-sheen var(--sheen-dur) cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.gdf--dark .gdf__sheen {
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 250, 235, calc(var(--sheen-a) * 0.6)) 45%,
    rgba(255, 250, 235, var(--sheen-a)) 55%,
    transparent 100%
  );
}

.gdf__vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(120% 110% at 50% 40%, transparent 55%, rgba(20, 22, 26, 0.07) 100%);
}

.gdf--dark .gdf__vignette {
  background: radial-gradient(120% 110% at 50% 40%, transparent 45%, rgba(0, 0, 0, 0.45) 100%);
}

.gdf__content {
  position: relative;
  z-index: 5;
  height: 100%;
}

.gdf.is-offscreen .gdf__sheen {
  animation-play-state: paused;
}

@keyframes gdf-sheen {
  0% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(-330%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gdf__sheen {
    animation: none;
  }
}