@layer base {
  body {
    background-color: var(--background);
    /* Atmosphere radials live in .page-atmosphere — body stays a flat base */
    background-image: none;
  }

  .dark body {
    background-image: none;
  }
}

@layer utilities {
  .bg-page-canvas {
    background-color: var(--background);
  }

  .bg-cta-photo-banner {
    background-color: var(--brand-primary-dark);
    background-image:
      radial-gradient(
        ellipse 90% 70% at 12% 20%,
        color-mix(in srgb, var(--brand-primary) 42%, transparent),
        transparent 58%
      ),
      radial-gradient(
        ellipse 80% 60% at 92% 85%,
        color-mix(in srgb, var(--brand-primary) 28%, transparent),
        transparent 55%
      ),
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--brand-primary-dark) 88%, transparent) 0%,
        color-mix(in srgb, var(--brand-primary-dark) 62%, var(--brand-primary)) 48%,
        color-mix(in srgb, var(--brand-primary) 78%, transparent) 100%
      ),
      linear-gradient(
        to top,
        color-mix(in srgb, var(--brand-primary-dark) 72%, transparent) 0%,
        transparent 55%
      ),
      url("/assets/main-pic/1dark.jpg");
    background-size: cover;
    background-position: center;
  }

  .bg-cta-photo-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: linear-gradient(
      180deg,
      color-mix(in srgb, white 12%, transparent) 0%,
      transparent 28%,
      transparent 72%,
      color-mix(in srgb, var(--brand-primary-dark) 40%, transparent) 100%
    );
  }
}

/* Diamond network pattern — default right side (~32%), 15% opacity.
 * Kept outside @layer so it isn't lost to utility cascade. */
.cta-diamond-pattern {
  position: absolute;
  top: -10%;
  bottom: -10%;
  inset-inline-start: 0;
  width: 32%;
  z-index: 0;
  pointer-events: none;
  background-color: #fff;
  opacity: 0.15;
  -webkit-mask-image:
    linear-gradient(to left, #000 42%, transparent 100%),
    url("/assets/patterns/cta-diamond-pattern.png?v=3");
  mask-image:
    linear-gradient(to left, #000 42%, transparent 100%),
    url("/assets/patterns/cta-diamond-pattern.png?v=3");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%, cover;
  mask-size: 100% 100%, cover;
  -webkit-mask-position: center, right center;
  mask-position: center, right center;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Left-side placement (physical left — e.g. contact CTA) */
.cta-diamond-pattern--left {
  inset-inline-start: auto;
  inset-inline-end: 0;
  -webkit-mask-image:
    linear-gradient(to right, #000 42%, transparent 100%),
    url("/assets/patterns/cta-diamond-pattern.png?v=3");
  mask-image:
    linear-gradient(to right, #000 42%, transparent 100%),
    url("/assets/patterns/cta-diamond-pattern.png?v=3");
  -webkit-mask-position: center, left center;
  mask-position: center, left center;
}