.distill-frosted {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-bg);
  pointer-events: none;
}

.distill-frosted-blob-a,
.distill-frosted-blob-b,
.distill-frosted-blob-c {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.72;
  will-change: transform;
}

.distill-frosted-blob-a {
  width: min(58vw, 520px);
  height: min(58vw, 520px);
  left: -12%;
  top: 8%;
  background: color-mix(in srgb, var(--color-accent) 88%, var(--color-accent-2));
  animation: distill-frosted-drift-a 22s ease-in-out infinite alternate;
}

.distill-frosted-blob-b {
  width: min(48vw, 440px);
  height: min(48vw, 440px);
  right: -8%;
  bottom: 12%;
  background: color-mix(in srgb, var(--color-accent-2) 75%, var(--color-light) 25%);
  animation: distill-frosted-drift-b 26s ease-in-out infinite alternate;
}

.distill-frosted-blob-c {
  width: min(36vw, 320px);
  height: min(36vw, 320px);
  left: 28%;
  bottom: -6%;
  background: color-mix(in srgb, var(--color-accent) 55%, transparent);
  opacity: 0.55;
  animation: distill-frosted-drift-c 18s ease-in-out infinite alternate;
}

.distill-frosted-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.distill-frosted-frost {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--color-bg) var(--frost-opacity), transparent);
  backdrop-filter: blur(var(--frost-blur)) saturate(1.08);
}

@keyframes distill-frosted-drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6%, 10%) scale(1.08); }
}

@keyframes distill-frosted-drift-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-8%, -6%) scale(1.05); }
}

@keyframes distill-frosted-drift-c {
  from { transform: translate(0, 0); }
  to   { transform: translate(4%, -12%); }
}

@media (prefers-reduced-motion: reduce) {
  .distill-frosted-blob-a,
  .distill-frosted-blob-b,
  .distill-frosted-blob-c {
    animation: none;
  }
}

/* landing variant */
.distill-frosted--landing .distill-frosted-blob-a {
  opacity: 0.58;
  background: color-mix(in srgb, var(--color-accent) 70%, var(--color-accent-2));
}
.distill-frosted--landing .distill-frosted-blob-b {
  opacity: 0.58;
  background: color-mix(in srgb, var(--color-accent-2) 60%, var(--color-light) 25%);
}
.distill-frosted--landing .distill-frosted-blob-c {
  opacity: 0.44;
  background: color-mix(in srgb, var(--color-accent) 44%, transparent);
}
.distill-frosted--landing .distill-frosted-grain {
  opacity: 0.05;
}
.distill-frosted--landing .distill-frosted-frost {
  background: color-mix(in srgb, var(--color-bg) 36%, transparent);
  backdrop-filter: blur(var(--frost-blur)) saturate(0.86);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(0.86);
}

/* hero variant */
.distill-frosted--hero {
  background: color-mix(in srgb, var(--color-bg) 42%, transparent);
}
.distill-frosted--hero .distill-frosted-blob-a {
  opacity: 0.42;
  background: color-mix(in srgb, var(--color-accent) 42%, var(--color-bg));
}
.distill-frosted--hero .distill-frosted-blob-b {
  opacity: 0.36;
  background: color-mix(in srgb, var(--color-accent-2) 34%, var(--color-bg));
}
.distill-frosted--hero .distill-frosted-blob-c {
  opacity: 0.32;
  background: color-mix(in srgb, var(--color-accent) 28%, var(--color-accent-2) 12%);
}
.distill-frosted--hero .distill-frosted-grain {
  opacity: 0.045;
}
.distill-frosted--hero .distill-frosted-frost {
  background: color-mix(in srgb, var(--color-bg) 4%, transparent);
  backdrop-filter: blur(6px) saturate(0.98);
  -webkit-backdrop-filter: blur(6px) saturate(0.98);
}

/* accent variant */
.distill-frosted--accent {
  background: color-mix(in srgb, var(--color-accent) 88%, var(--color-bg) 12%);
}
.distill-frosted--accent .distill-frosted-blob-a {
  opacity: 0.62;
  background: color-mix(in srgb, var(--color-light) 72%, var(--color-accent));
}
.distill-frosted--accent .distill-frosted-blob-b {
  opacity: 0.5;
  background: color-mix(in srgb, var(--color-bg) 48%, var(--color-accent));
}
.distill-frosted--accent .distill-frosted-blob-c {
  opacity: 0.44;
  background: color-mix(in srgb, var(--color-light) 38%, var(--color-bg) 18%);
}
.distill-frosted--accent .distill-frosted-grain {
  opacity: 0.05;
}
.distill-frosted--accent .distill-frosted-frost {
  background: color-mix(in srgb, var(--color-accent) 28%, transparent);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}