/* CS Decorations — reusable background decoration classes.
   Add any of these classes to a module's root element to opt in.
   Multiple decorations can be combined (e.g. `cs-decor-cool-bl cs-decor-lines`).

   All decorations use ::before and ::after pseudo-elements, so ensure the
   host element has `position: relative` and `overflow: hidden` (or `isolation: isolate`).
   Decorations are pointer-events: none and behind content (z-index: 0).

   All rem values follow BB Theme's html { font-size: 10px } base — 1.6rem = 16px. */

/* ============================================================
   Base — decorated container primitive.
   Apply this or manually ensure your element positions layers properly.
   ============================================================ */
[class*="cs-decor-"] {
  position: relative;
  isolation: isolate;
}

[class*="cs-decor-"] > * {
  position: relative;
  z-index: 1;
}

/* Shared: dedicate ::before to soft radial glows and ::after to stroke patterns.
   If a section uses both, they don't conflict. */

/* ============================================================
   Warm/orange radial glows
   ============================================================ */
.cs-decor-warm-tr::before,
.cs-decor-warm-tl::before,
.cs-decor-warm-br::before,
.cs-decor-warm-bl::before,
.cs-decor-warm-r::before,
.cs-decor-warm-l::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 70rem;  /* 700px */
  height: 70rem;
  background: radial-gradient(
    circle at center,
    rgba(252, 127, 86, 0.28) 0%,   /* --cs-orange with 28% alpha */
    rgba(252, 127, 86, 0.14) 25%,
    rgba(252, 127, 86, 0.05) 45%,
    transparent 65%
  );
  filter: blur(40px);
}

/* Positions */
.cs-decor-warm-tr::before {
  top: -20rem;
  right: -20rem;
}
.cs-decor-warm-tl::before {
  top: -20rem;
  left: -20rem;
}
.cs-decor-warm-br::before {
  bottom: -20rem;
  right: -20rem;
}
.cs-decor-warm-bl::before {
  bottom: -20rem;
  left: -20rem;
}
.cs-decor-warm-r::before {
  top: 50%;
  right: -30rem;
  transform: translateY(-50%);
}
.cs-decor-warm-l::before {
  top: 50%;
  left: -30rem;
  transform: translateY(-50%);
}

/* ============================================================
   Cool / blue radial glows
   ============================================================ */
.cs-decor-cool-tr::before,
.cs-decor-cool-tl::before,
.cs-decor-cool-br::before,
.cs-decor-cool-bl::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 70rem;
  height: 70rem;
  background: radial-gradient(
    circle at center,
    rgba(64, 133, 197, 0.40) 0%,   /* --cs-blue */
    rgba(64, 133, 197, 0.22) 35%,
    rgba(64, 133, 197, 0.08) 55%,
    transparent 75%
  );
  filter: blur(40px);
}

.cs-decor-cool-tr::before { top: -10rem; right: -10rem; }
.cs-decor-cool-tl::before { top: -10rem; left: -10rem; }
.cs-decor-cool-br::before { bottom: -10rem; right: -10rem; }
.cs-decor-cool-bl::before { bottom: -10rem; left: -10rem; }

/* ============================================================
   Warm duo — two orange glows on one ::before (single glows own the
   pseudo, so a dual needs its own class). Top-left + bottom-right
   corners, per the Figma "team" design.
   ============================================================ */
.cs-decor-warm-duo::before {
  content: "";
  position: absolute;
  /* Extend 32rem past the section box; gradient centers sit at the section
     corners and their fade (75% of a 42rem radius = ~31.5rem) completes just
     inside the layer edge, so nothing gets trimmed. */
  inset: -32rem;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle 42rem at 32rem 32rem,
      rgba(252, 127, 86, 0.32) 0%,
      rgba(252, 127, 86, 0.16) 35%,
      rgba(252, 127, 86, 0.06) 55%,
      transparent 75%
    ),
    radial-gradient(
      circle 42rem at calc(100% - 32rem) calc(100% - 32rem),
      rgba(252, 127, 86, 0.32) 0%,
      rgba(252, 127, 86, 0.16) 35%,
      rgba(252, 127, 86, 0.06) 55%,
      transparent 75%
    );
  filter: blur(40px);
}

/* ============================================================
   Glows trio — warm top-right, broad warm bottom-left, cool
   bottom-right, on one ::before. Per the Figma "map" section; the
   cool BR wash also makes the mirrored lines' off-white pair read
   as white strokes there.
   ============================================================ */
.cs-decor-trio::before {
  content: "";
  position: absolute;
  /* Extend 32rem past the section box; gradient centers sit at the section
     corners and their fade (75% of a 42rem radius = ~31.5rem) completes just
     inside the layer edge, so nothing gets trimmed. */
  inset: -32rem;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle 38rem at calc(100% - 36rem) 32rem,
      rgba(252, 127, 86, 0.26) 0%,
      rgba(252, 127, 86, 0.13) 35%,
      rgba(252, 127, 86, 0.05) 55%,
      transparent 75%
    ),
    radial-gradient(
      circle 42rem at 32rem calc(100% - 36rem),
      rgba(252, 127, 86, 0.24) 0%,
      rgba(252, 127, 86, 0.12) 35%,
      rgba(252, 127, 86, 0.05) 55%,
      transparent 75%
    ),
    radial-gradient(
      circle 42rem at calc(100% - 32rem) calc(100% - 32rem),
      rgba(147, 180, 221, 0.55) 0%,
      rgba(147, 180, 221, 0.30) 35%,
      rgba(147, 180, 221, 0.10) 55%,
      transparent 75%
    );
  filter: blur(40px);
}

/* ============================================================
   Cool duo (corners) — blue glows at top-left + bottom-right on one
   ::before, per the Figma "quotes" section.
   ============================================================ */
.cs-decor-cool-duo-corners::before {
  content: "";
  position: absolute;
  /* Extend 32rem past the section box; gradient centers sit at the section
     corners and their fade (75% of a 42rem radius = ~31.5rem) completes just
     inside the layer edge, so nothing gets trimmed. */
  inset: -32rem;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle 42rem at 32rem 32rem,
      rgba(64, 133, 197, 0.40) 0%,
      rgba(64, 133, 197, 0.22) 35%,
      rgba(64, 133, 197, 0.08) 55%,
      transparent 75%
    ),
    radial-gradient(
      circle 42rem at calc(100% - 32rem) calc(100% - 32rem),
      rgba(64, 133, 197, 0.40) 0%,
      rgba(64, 133, 197, 0.22) 35%,
      rgba(64, 133, 197, 0.08) 55%,
      transparent 75%
    );
  filter: blur(40px);
}

/* ============================================================
   Cool duo — two blue glows on one ::before (single glows own the
   pseudo, so a dual needs its own class). Right glow sits at ~40%
   down the section — at card level, per the Figma "areas" design —
   left glow hugs the bottom-left corner.
   ============================================================ */
.cs-decor-cool-duo::before {
  content: "";
  position: absolute;
  /* Extend 32rem past the section box; gradient centers sit at the section
     corners and their fade (75% of a 42rem radius = ~31.5rem) completes just
     inside the layer edge, so nothing gets trimmed. */
  inset: -32rem;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle 42rem at calc(100% - 32rem) 40%,
      rgba(64, 133, 197, 0.45) 0%,
      rgba(64, 133, 197, 0.25) 35%,
      rgba(64, 133, 197, 0.10) 55%,
      transparent 75%
    ),
    radial-gradient(
      circle 42rem at 32rem calc(100% - 32rem),
      rgba(64, 133, 197, 0.45) 0%,
      rgba(64, 133, 197, 0.25) 35%,
      rgba(64, 133, 197, 0.10) 55%,
      transparent 75%
    );
  filter: blur(40px);
}

/* ============================================================
   Cool duo (corners, flipped) — blue glows at top-right + bottom-left
   on one ::before, per the Figma individual-therapy hero/steps designs.
   ============================================================ */
.cs-decor-cool-tr-bl::before {
  content: "";
  position: absolute;
  inset: -32rem;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle 42rem at calc(100% - 32rem) 32rem,
      rgba(64, 133, 197, 0.40) 0%,
      rgba(64, 133, 197, 0.22) 35%,
      rgba(64, 133, 197, 0.08) 55%,
      transparent 75%
    ),
    radial-gradient(
      circle 42rem at 32rem calc(100% - 32rem),
      rgba(64, 133, 197, 0.40) 0%,
      rgba(64, 133, 197, 0.22) 35%,
      rgba(64, 133, 197, 0.08) 55%,
      transparent 75%
    );
  filter: blur(40px);
}

/* ============================================================
   Warm duo (raised) — TL corner glow + right-side glow raised above the
   bottom corner and pulled inward, so its fade completes before the
   viewport edge (avoids the hard clip line when the section nearly
   spans the viewport).
   ============================================================ */
.cs-decor-warm-duo-raised::before {
  content: "";
  position: absolute;
  inset: -32rem;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle 42rem at 32rem 32rem,
      rgba(252, 127, 86, 0.32) 0%,
      rgba(252, 127, 86, 0.16) 35%,
      rgba(252, 127, 86, 0.06) 55%,
      transparent 75%
    ),
    radial-gradient(
      circle 42rem at calc(100% - 54rem) calc(100% - 45rem),
      rgba(252, 127, 86, 0.32) 0%,
      rgba(252, 127, 86, 0.16) 35%,
      rgba(252, 127, 86, 0.06) 55%,
      transparent 75%
    );
  filter: blur(40px);
}

/* ============================================================
   Warm duo (corners, flipped) — orange glows at top-right + bottom-left
   on one ::before (mirror of cs-decor-warm-duo).
   ============================================================ */
.cs-decor-warm-tr-bl::before {
  content: "";
  position: absolute;
  inset: -32rem;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle 42rem at calc(100% - 32rem) 32rem,
      rgba(252, 127, 86, 0.32) 0%,
      rgba(252, 127, 86, 0.16) 35%,
      rgba(252, 127, 86, 0.06) 55%,
      transparent 75%
    ),
    radial-gradient(
      circle 42rem at 32rem calc(100% - 32rem),
      rgba(252, 127, 86, 0.32) 0%,
      rgba(252, 127, 86, 0.16) 35%,
      rgba(252, 127, 86, 0.06) 55%,
      transparent 75%
    );
  filter: blur(40px);
}

/* ============================================================
   Clip-top modifier — stops a duo/trio glow layer from extending above
   the section (e.g. when the previous section is an opaque band the
   glow must not paint over). Combine with any inset glow class.
   ============================================================ */
.cs-decor-clip-top::before {
  top: 0;
}

/* ============================================================
   Crossing hairlines — the long intersecting lines from the Figma
   "steps" section (blue pair crossing top-right, off-white pair
   bottom-left). Uses ::after like the stroke patterns, so it can
   layer with a ::before glow.
   ============================================================ */
.cs-decor-lines::after,
.cs-decor-lines-flip::after,
.cs-decor-lines-light::after,
.cs-decor-lines-light-flip::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 0;
  background-image: url("../img/decor-lines.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Mirrored variants — blue pair crosses top-left, off-white pair bottom-right. */
.cs-decor-lines-flip::after,
.cs-decor-lines-light-flip::after {
  transform: scaleX(-1);
}

/* Light variants — all four hairlines recolored to white (for white
   sections, e.g. the Figma resources design). */
.cs-decor-lines-light::after,
.cs-decor-lines-light-flip::after {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* ============================================================
   Gap hairlines — adds a 74px bottom gap to the section with the
   crossing-lines slice from the Figma "group-join-quote" divider.
   Class is doubled so the padding beats module-level shorthands
   regardless of stylesheet order.
   ============================================================ */
.cs-decor-gap-lines.cs-decor-gap-lines {
  padding-bottom: 7.4rem;
}

.cs-decor-gap-lines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7.4rem;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/decor-gap-lines.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ============================================================
   Responsive tuning — smaller glows on smaller screens
   ============================================================ */
@media (max-width: 900px) {
  /* Corner glows only — cs-decor-cool-duo is full-bleed (inset: 0) and must
     NOT get a fixed size, so it's listed explicitly rather than via [class*=]. */
  .cs-decor-warm-tr::before,
  .cs-decor-warm-tl::before,
  .cs-decor-warm-br::before,
  .cs-decor-warm-bl::before,
  .cs-decor-warm-r::before,
  .cs-decor-warm-l::before,
  .cs-decor-cool-tr::before,
  .cs-decor-cool-tl::before,
  .cs-decor-cool-br::before,
  .cs-decor-cool-bl::before {
    width: 45rem;
    height: 45rem;
  }
  .cs-decor-warm-tr::before,
  .cs-decor-cool-tr::before {
    top: -15rem;
    right: -15rem;
  }
  /* Similar shrinking would apply to other positions; left generic to keep file compact */

  /* Duos/trio: tighten the gradient radii instead of the layer size */
  .cs-decor-trio::before {
    background:
      radial-gradient(
        circle 24rem at calc(100% - 36rem) 32rem,
        rgba(252, 127, 86, 0.26) 0%,
        rgba(252, 127, 86, 0.13) 35%,
        rgba(252, 127, 86, 0.05) 55%,
        transparent 75%
      ),
      radial-gradient(
        circle 30rem at 32rem calc(100% - 36rem),
        rgba(252, 127, 86, 0.24) 0%,
        rgba(252, 127, 86, 0.12) 35%,
        rgba(252, 127, 86, 0.05) 55%,
        transparent 75%
      ),
      radial-gradient(
        circle 26rem at calc(100% - 32rem) calc(100% - 32rem),
        rgba(147, 180, 221, 0.55) 0%,
        rgba(147, 180, 221, 0.30) 35%,
        rgba(147, 180, 221, 0.10) 55%,
        transparent 75%
      );
  }

  .cs-decor-warm-duo::before {
    background:
      radial-gradient(
        circle 26rem at 32rem 32rem,
        rgba(252, 127, 86, 0.32) 0%,
        rgba(252, 127, 86, 0.16) 35%,
        rgba(252, 127, 86, 0.06) 55%,
        transparent 75%
      ),
      radial-gradient(
        circle 26rem at calc(100% - 32rem) calc(100% - 32rem),
        rgba(252, 127, 86, 0.32) 0%,
        rgba(252, 127, 86, 0.16) 35%,
        rgba(252, 127, 86, 0.06) 55%,
        transparent 75%
      );
  }

  .cs-decor-cool-duo::before {
    background:
      radial-gradient(
        circle 26rem at calc(100% - 32rem) 40%,
        rgba(64, 133, 197, 0.26) 0%,
        rgba(64, 133, 197, 0.13) 30%,
        rgba(64, 133, 197, 0.05) 50%,
        transparent 70%
      ),
      radial-gradient(
        circle 26rem at 32rem calc(100% - 32rem),
        rgba(64, 133, 197, 0.26) 0%,
        rgba(64, 133, 197, 0.13) 30%,
        rgba(64, 133, 197, 0.05) 50%,
        transparent 70%
      );
  }
}

/* Respect reduced-motion preference (decorations are still static — no motion — but keep hook for future) */
@media (prefers-reduced-motion: reduce) {
  [class*="cs-decor-"]::before,
  [class*="cs-decor-"]::after {
    /* No animation to disable currently; hook reserved for future decorative motion */
  }
}