/* =========================================================
   Random portfolio background image inside .feature-diagram
   Append to home.css (after the existing .feature-diagram /
   .diag-node / .orbit rules). Works with the JS in
   feature-bg-image.js, which injects the .feature-bg-image div.

   Layering (bottom to top):
     1. .feature-diagram background gradient (already defined)
     2. .feature-bg-image        <-- new
     3. .diag-node (core + n1-n4)
     4. .orbit circles
   ========================================================= */

.feature-diagram {
  isolation: isolate; /* keep this card's z-index stack self-contained */
}

.feature-bg-image {
  position: absolute;
  inset: -15%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .4;
  transform: rotate(var(--bg-angle, -6deg)) scale(1.12);
  transition: opacity .4s ease, transform .6s ease;
  pointer-events: none;

  /* soft fade into the surrounding gradient instead of a hard edge */
  mask-image: radial-gradient(circle at 55% 45%, black 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 55% 45%, black 35%, transparent 78%);
}

/* keep existing content/circles above the new image layer */
.feature-diagram .diag-node { position: absolute; z-index: 1; }
.feature-diagram .orbit { position: absolute; z-index: 2; }

/* Tablet / mobile: same technique, slightly calmer so it doesn't
   fight with the smaller diagram height. */
@media (max-width: 920px) {
  .feature-bg-image {
    opacity: .32;
    transform: rotate(var(--bg-angle, -6deg)) scale(1.05);
  }
}

@media (max-width: 580px) {
  .feature-bg-image {
    inset: -20%;
    opacity: .28;
  }
}