/* Background Logo Overlay for Homepage Background */

/* Base styles - using bg-logo with gradient */
.mdx-container {
  background-image:
    /* linear-gradient(135deg, rgba(139, 54, 199, 0.95), rgba(166, 63, 217, 0.95)), */
    url("https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: 0 0, right 20px center, bottom !important;
  background-size: 100% 100%, 400px auto, 100% auto !important;
  background-attachment: scroll, scroll, scroll !important;
  position: relative;
  overflow: hidden;
}

/* Dark theme - using bg-logo with darker gradient */
[data-md-color-scheme="slate"] .mdx-container {
  background-image:
    /* 0linear-gradient(135deg, rgba(54, 57, 73, 0.98), rgba(54, 57, 73, 0.98)), */
    url("https://images.pexels.com/photos/6424584/pexels-photo-6424584.jpeg"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(230, 15%, 14%, 1)' /></svg>") !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: 0 0, right 20px center, bottom !important;
  background-size: 100% 100%, 400px auto, 100% auto !important;
  background-attachment: scroll, scroll, scroll !important;
}

/* Add subtle depth effect */
.mdx-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center top, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above the pattern overlay */
.mdx-hero {
  position: relative;
  z-index: 2;
}