/* ===========================================
   CUSTOM-V3.CSS - Atmosphere Overrides
   Imports V2 base (which imports V1), revives
   the global gradient with on-brand colors and
   adds a grain texture overlay.
   Toggle: USE_V3_STYLES = True
   =========================================== */

@import url("custom-v2.2dad9d31274d.css");

/* -----------------------------------------
   1. Revived Gradient — On-Brand Palette
   Teal top-left, seafoam top-right, green
   bottom-center. Fixed behind all content.
   ----------------------------------------- */
.global-bg-gradient {
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  will-change: auto;
  opacity: var(--im-gradient-opacity, 0.10);
  background:
    radial-gradient(
      ellipse 80vw 50vh at 0% 0%,
      var(--im-accent-200) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60vw 40vh at 100% 12%,
      var(--im-accent-100) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 70vw 45vh at 25% 100%,
      var(--im-green) 0%,
      transparent 60%
    );
}

/* Mobile — fewer blobs, lower opacity */
@media (max-width: 768px) {
  .global-bg-gradient {
    opacity: var(--im-gradient-opacity-mobile, 0.07);
    background:
      radial-gradient(
        ellipse 100vw 60vh at 5% 5%,
        var(--im-accent-200) 0%,
        transparent 65%
      ),
      radial-gradient(
        ellipse 80vw 50vh at 90% 15%,
        var(--im-accent-100) 0%,
        transparent 70%
      );
  }
}

/* -----------------------------------------
   2. Grain Texture Overlay
   SVG fractal noise via data URI — gives a
   subtle paper-like dither (Keystone-style).
   ----------------------------------------- */
.global-bg-gradient::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: var(--im-grain-opacity, 0.30);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* -----------------------------------------
   3. Transparent Trust Bar
   Let the gradient flow through the hero
   trust strip instead of blocking it with
   opaque white.
   ----------------------------------------- */
.im-hero-trust {
  background: transparent;
}

/* -----------------------------------------
   4. Reduced Motion
   ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .global-bg-gradient {
    opacity: 0.06;
  }
}