.gflow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.gflow--ground {
  background: #04070d;
}

.gflow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(46% 20% at 30% calc(var(--gflow-fb-y, 50%) - 2%), rgba(255, 88, 165, 0.40), transparent 70%),
    radial-gradient(42% 17% at 58% calc(var(--gflow-fb-y, 50%) + 3%), rgba(138, 80, 255, 0.38), transparent 72%),
    radial-gradient(52% 14% at 10% calc(var(--gflow-fb-y, 50%) + 5%), rgba(38, 106, 255, 0.36), transparent 74%),
    radial-gradient(48% 14% at 88% calc(var(--gflow-fb-y, 50%) - 4%), rgba(255, 152, 66, 0.26), transparent 74%),
    radial-gradient(22% 9% at 44% var(--gflow-fb-y, 50%), rgba(255, 226, 240, 0.28), transparent 68%);
  filter: blur(40px);
}

.gflow--live::before { display: none; }

.gflow__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gflow > *:not(.gflow__canvas) {
  position: relative;
  z-index: 2;
}

.gflow__content {
  background: radial-gradient(closest-side,
    rgba(4, 7, 13, 0.78), rgba(4, 7, 13, 0.42) 55%, rgba(4, 7, 13, 0) 78%);
  padding: 34px 24px;
}

.gflow--grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.gflow--hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gflow--strip {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media print {
  .gflow { background: transparent !important; }
  .gflow::before,
  .gflow__canvas,
  .gflow--grain::after { display: none !important; }
}

.bg-flow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.bg-flow::before { filter: blur(60px); }

.bg-flow.gflow--grain::after {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
}