/**
 * Root Solve: visual effects
 *
 * Paint order (bottom → top):
 *   1. page / parallax media / veils / section tints
 *   2. fixed wire + branch canvases
 *   3. text, links, buttons, form controls
 *
 * JS also punches keepout holes over copy/controls every frame.
 * Do NOT raise whole opaque sections over the canvases.
 */

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;
}

/*
 * isolation:isolate traps child z-index so copy cannot clear the canvases.
 * Media/veil stay locally ordered via z-index:0 (DOM order: media then veil).
 */
body.rs-has-effects .rs-parallax-slice {
  isolation: auto;
}

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;
}

/* Undo components.css lifting the whole parallax container over the canvases */
body.rs-has-effects .rs-parallax-slice > .rs-container {
  z-index: auto;
}

/*
 * Solid section fills must not sit above canvases.
 * Banded sections paint their tint via ::before under the effects.
 */
body.rs-has-effects .rs-section {
  position: relative;
  z-index: auto;
  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 cards so wires remain readable when they cross the surface */
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 {
  position: relative;
  z-index: auto;
  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);
}

/*
 * TEXT + BUTTONS/controls only above canvases.
 * Do not lift layout wrappers (.rs-cluster, .rs-error__actions, cards,
 * section shells, hero content boxes, footers as a block, …).
 */
body.rs-has-effects :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  dt,
  dd,
  figcaption,
  blockquote,
  label,
  legend,
  small,
  strong,
  em,
  b,
  i,
  code,
  pre,
  kbd,
  samp,
  td,
  th,
  summary,
  caption,
  a,
  button,
  input,
  textarea,
  select,
  .lede,
  .rs-eyebrow,
  .rs-section__title,
  .rs-section__lede,
  .rs-hero__brand,
  .rs-hero__headline,
  .rs-hero__lede,
  .rs-brand__name,
  .rs-btn,
  .rs-footer__label,
  .rs-footer__tagline,
  .rs-footer__meta,
  .rs-nav__toggle,
  .rs-lang button,
  .svc-hero__title,
  .svc-hero__lede,
  .svc-card__title,
  .svc-choose__title,
  .rs-article-filter,
  .rs-article-tag
) {
  position: relative;
  z-index: 2;
}

/* Sticky nav chrome stays above everything */
body.rs-has-effects .rs-nav {
  z-index: 40;
}

@media (max-width: 720px), (pointer: coarse) {
  .rs-effect-growth {
    opacity: 0.5;
  }

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

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