.ambient-bg.surface-background {
  inset: 0;
  background: #090a0b;
}

.cover-surface {
  position: absolute;
  inset: 0;
  isolation: isolate;
  background-color: color-mix(in srgb, rgb(var(--surface-color, var(--ambient-accent-1))) 70%, #000);
}

.color-surface-fill {
  --surface-color: 128, 128, 128;
  background-color: rgb(var(--surface-color));
  opacity: 0;
  transition: background-color 0.74s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s ease-out;
}

.color-surface-fill.is-texture-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .color-surface-fill { transition: none; }
}

.surface-texture {
  position: absolute;
  top: -4%;
  left: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  transform: translateZ(0);
  pointer-events: none;
}

.surface-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6, 7, 8, 0.88), transparent 40%, rgba(6, 7, 8, 0.14));
}