/* ============================================================================
   9 · THE CLOSE — v2 Block 11. The band's own ground is the aurora
   (components/aurora.css, and its §3.7 exception) in the Radar wheel's
   colours: vivid across the whole width at the top, where it meets the
   brand wall's light ground, then settling down the band into purple-900,
   the footer's colour, so the close and the footer read as one. The hero
   mirrors it (sections/hero.css). Contrast: the title (large text, 3:1)
   sits where the fields are already mixed into purple.
   ========================================================================= */

.close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--space-section) + var(--space-8)) 0 var(--space-section);
  background: linear-gradient(180deg, var(--purple-300) 0%, var(--purple-700) 35%, var(--purple-800) 60%, var(--purple-900) 100%);
  text-align: center;
}
/* The aurora: seven colour fields, each its own element so aurora.js can
   drift it towards the pointer by transform alone. */
.close__aurora {
  top: -20%; left: -10%; right: -10%; bottom: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 30%, rgba(0, 0, 0, 0.55) 55%, transparent 85%);
          mask-image: linear-gradient(180deg, #000 0, #000 30%, rgba(0, 0, 0, 0.55) 55%, transparent 85%);
}
.close__aurora span:nth-child(1) { --c: var(--radar-dmr);      left: 10%;  top: -6%;  width: 48%; height: 100%; }
.close__aurora span:nth-child(2) { --c: var(--radar-ahp);      left: 64%;  top: -44%; width: 56%; height: 140%; }
.close__aurora span:nth-child(3) { --c: var(--radar-ebs);      left: 42%;  top: -35%; width: 60%; height: 90%; }
.close__aurora span:nth-child(4) { --c: var(--graphic-violet); left: 38%;  top: -26%; width: 44%; height: 120%; }
.close__aurora span:nth-child(5) { --c: var(--radar-cpf);      left: 14%;  top: -16%; width: 52%; height: 80%; }
.close__aurora span:nth-child(6) { --c: var(--radar-esw);      left: -6%;  top: -10%; width: 48%; height: 76%; }
.close__aurora span:nth-child(7) { --c: var(--radar-dmr);      left: -24%; top: -5%;  width: 52%; height: 110%; }
/* The join with the brand wall: its light ground runs a short way in, so
   the colours rise out of it rather than start at a line. */
.close::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: var(--space-12);
  background: linear-gradient(180deg, var(--purple-050), color-mix(in srgb, var(--purple-050) 40%, transparent) 35%, transparent);
}
.close__inner { display: grid; justify-items: center; }
.close__title { margin-bottom: 0; }
.close__body { margin: 0; max-width: 44ch; font-size: var(--type-lead); line-height: 1.65; color: var(--color-body); }