body.omnifill-resource-bg {
  background:
    radial-gradient(circle at 18% 8%, rgba(0, 111, 221, 0.075), transparent 28%),
    radial-gradient(circle at 88% 6%, rgba(115, 208, 75, 0.075), transparent 25%),
    linear-gradient(180deg, #F8FBFF 0%, #F8FAFC 48%, #FFFFFF 100%);
  overflow-x: hidden;
}

body.omnifill-resource-bg::before,
body.omnifill-resource-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body.omnifill-resource-bg::before {
  z-index: 0;
  background:
    linear-gradient(140deg, transparent 0 37%, rgba(0, 111, 221, 0.035) 37% 46%, transparent 46% 100%),
    linear-gradient(156deg, transparent 0 56%, rgba(115, 208, 75, 0.035) 56% 65%, transparent 65% 100%);
  opacity: 0.62;
}

body.omnifill-resource-bg::after {
  z-index: 0;
  inset: -70px -110px -130px -110px;
  background: url("/assets/resource-background.svg?v=20260509-soft") center / 100% 100% no-repeat;
  opacity: 0.42;
  animation: omnifillResourceBrushFloat 11s ease-in-out infinite;
}

.omnifill-resource-content {
  position: relative;
  z-index: 1;
}

body.omnifill-resource-bg .omnifill-site-footer {
  position: relative;
  z-index: 2;
}

@keyframes omnifillResourceBrushFloat {
  0%, 100% { transform: translate3d(-10px, -4px, 0) rotate(-0.35deg); }
  45% { transform: translate3d(18px, 9px, 0) rotate(0.45deg); }
  72% { transform: translate3d(4px, -10px, 0) rotate(0.1deg); }
}

@media (prefers-reduced-motion: reduce) {
  body.omnifill-resource-bg::after {
    animation: none !important;
  }
}