/* Grain gradients · James Weinberg
   The element with data-gradient becomes the surface. Your content sits on top.
   The CSS backgrounds below show before the script runs, and stay if WebGL
   is not available. */

[data-gradient] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  touch-action: pan-y;
  background-color: #0A0B09;
  color: #EEF0E8;
}

[data-gradient] > .gg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: var(--gg-z, -1);
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
[data-gradient].gg-ready > .gg-canvas { opacity: 1; }

/* Grain for the CSS version. Hidden once the live gradient is drawing. */
[data-gradient]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .5;
  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='.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 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-gradient].gg-ready::after { display: none; }

/* CSS stand-ins, close to each shape */
[data-gradient="sweep"] {
  background-image:
    linear-gradient(54deg, transparent 46%, rgba(238,240,232,.16) 58%, rgba(238,240,232,.55) 67%, rgba(238,240,232,.16) 76%, transparent 88%);
}
[data-gradient="beam"] {
  background-image:
    radial-gradient(60% 14% at 0% 28%, rgba(238,240,232,.7), transparent 70%),
    radial-gradient(55% 13% at 100% 74%, rgba(238,240,232,.6), transparent 70%);
}
[data-gradient="silk"] {
  background-image:
    linear-gradient(176deg, transparent 40%, rgba(238,240,232,.55) 52%, rgba(238,240,232,.18) 60%, transparent 80%);
}
[data-gradient="midnight"] {
  background-image:
    radial-gradient(45% 50% at 78% 18%, rgba(238,240,232,.12), transparent 70%),
    radial-gradient(40% 40% at 18% 86%, rgba(238,240,232,.07), transparent 70%);
}
[data-gradient="horizon"] {
  background-image:
    radial-gradient(80% 30% at 50% 67%, rgba(238,240,232,.45), transparent 70%);
}
[data-gradient="spotlight"] {
  background-image:
    radial-gradient(28% 40% at 68% 50%, rgba(238,240,232,.7), transparent 70%);
}
[data-gradient="corner"] {
  background-image:
    radial-gradient(60% 75% at 100% 0%, rgba(238,240,232,.65), transparent 70%);
}
[data-gradient="corner"][data-flip] {
  background-image:
    radial-gradient(60% 75% at 0% 0%, rgba(238,240,232,.65), transparent 70%);
}
[data-gradient="ribbon"] {
  background-image:
    linear-gradient(170deg, transparent 38%, rgba(238,240,232,.45) 48%, transparent 58%);
}
[data-gradient="green"] {
  background-image:
    radial-gradient(60% 75% at 90% 100%, rgba(198,240,77,.6), transparent 70%);
}