/**
 * Root Solve: visual effects
 * Canvases sit above page/section fills, always under copy and UI.
 */

body.rs-has-effects {
  isolation: isolate;
}

.rs-effect-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.rs-effect-growth {
  opacity: 1;
}

.rs-effect-circuits {
  opacity: 0.85;
}

/* Parallax slice media/veil + hero media under canvases */
body.rs-has-effects .rs-parallax-slice__media,
body.rs-has-effects .rs-parallax-slice__veil,
body.rs-has-effects .rs-hero__media,
body.rs-has-effects .rs-hero__veil {
  z-index: 0;
}

/*
 * Solid fills must not raise a stacking context above the canvases.
 * Banded sections paint their tint via ::before at z-index 0.
 */
body.rs-has-effects .rs-section {
  position: relative;
  background: transparent !important;
  background-image: none !important;
}

body.rs-has-effects .rs-section.rs-section--sunken::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--rs-bg-sunken) 78%, transparent);
  border-block: 1px solid var(--rs-border);
}

/* Soften elevated surfaces so growth/circuits stay visible underneath */
body.rs-has-effects .rs-panel,
body.rs-has-effects .svc-card,
body.rs-has-effects .svc-choose,
body.rs-has-effects .svc-example,
body.rs-has-effects .svc-example__preview {
  background-color: color-mix(in srgb, var(--rs-bg-elevated) 72%, transparent);
}

body.rs-has-effects .rs-panel--accent {
  background:
    linear-gradient(145deg, var(--rs-cyan-soft), transparent 45%),
    color-mix(in srgb, var(--rs-bg-elevated) 72%, transparent);
}

body.rs-has-effects .rs-panel--leaf,
body.rs-has-effects .svc-choose {
  background:
    linear-gradient(145deg, var(--rs-leaf-soft), transparent 50%),
    color-mix(in srgb, var(--rs-bg-elevated) 72%, transparent);
}

body.rs-has-effects .svc-example {
  background:
    linear-gradient(145deg, var(--rs-cyan-soft), transparent 55%),
    color-mix(in srgb, var(--rs-bg-elevated) 72%, transparent);
}

body.rs-has-effects .svc-example__preview {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, var(--rs-cyan-soft), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, var(--rs-leaf-soft), transparent 50%),
    color-mix(in srgb, var(--rs-bg-sunken) 55%, transparent);
}

/* Copy and controls above canvases */
body.rs-has-effects .rs-hero__content,
body.rs-has-effects .rs-container,
body.rs-has-effects .svc-hero,
body.rs-has-effects .rs-footer__grid,
body.rs-has-effects .rs-footer > .rs-container,
body.rs-has-effects .rs-chart-shell,
body.rs-has-effects .rs-panel,
body.rs-has-effects .svc-card,
body.rs-has-effects .svc-choose,
body.rs-has-effects .svc-example,
body.rs-has-effects .svc-grid > *,
body.rs-has-effects .home-principles > *,
body.rs-has-effects .home-sovereign-grid > * {
  position: relative;
  z-index: 2;
}

/* Sticky nav stays on top; keep position:sticky from components */
body.rs-has-effects .rs-nav {
  z-index: 40;
}

@media (prefers-reduced-motion: reduce) {
  .rs-effect-layer {
    display: none !important;
  }
}