/* Source: aeolus-design-system/src/components/Sections.tsx (SectionTransition, final 2026-08-24 overlay melt) */

/*
  Exact static markup contract. The layers are separate because the source
  applies a different 16-stop mask and blend mode to each one.

  <div class="melt" data-from="night" data-to="cream" aria-hidden="true">
    <div class="melt__composite">
      <div class="melt__field"></div>
      <div class="melt__dark-aurora"></div>
      <div class="melt__light-aurora"></div>
      <div class="melt__dark-weave"></div>
      <div class="melt__light-weave"></div>
      <div class="melt__dark-vignette"></div>
      <div class="melt__dark-noise"></div>
      <div class="melt__stars"></div>
    </div>
  </div>

  --melt-height and --melt-overlap may override the component defaults.
*/

.melt {
  --melt-field: linear-gradient(to bottom,
    var(--aeolus-cream) 0%, var(--aeolus-cream) 26%, #EAD9AE 32%,
    #E8B44A 39%, #C89A3A 46%, #6b5a4e 53%, #2e3550 60%,
    #101830 67%, #070A12 74%, #070A12 100%);
  --melt-dark-aurora:
    radial-gradient(58% 74% at 12% 24%, #1B4B6B 0%, rgba(27,75,107,0) 62%),
    radial-gradient(64% 76% at 60% 98%, rgba(178,58,22,0.58) 0%, rgba(178,58,22,0) 72%),
    radial-gradient(54% 64% at 82% 14%, rgba(197,145,42,0.52) 0%, rgba(197,145,42,0) 70%),
    radial-gradient(60% 78% at 98% 62%, #0B1020 0%, rgba(11,16,32,0) 66%);
  --melt-light-aurora:
    radial-gradient(48% 62% at 82% 24%, #E8B44A 0%, rgba(232,180,74,0) 64%),
    radial-gradient(44% 58% at 96% 76%, #C96A2E 0%, rgba(201,106,46,0) 64%),
    radial-gradient(40% 54% at 62% 96%, #6E97B5 0%, rgba(110,151,181,0) 66%);
  --melt-light-weave: var(--v11-sailcloth-cream-scalable, var(--aeolus-sailcloth-cream));
  --melt-light-weave-size: var(--v11-light-weave-period, 13px) 100%;
  --melt-dark-direction: to bottom;
  --melt-light-direction: to top;
  --melt-stars:
    radial-gradient(1.3px 1.3px at 17% 30%, rgba(254,254,254,.55), transparent 100%),
    radial-gradient(1px 1px at 72% 25%, rgba(243,208,106,.42), transparent 100%),
    radial-gradient(1px 1px at 44% 32%, rgba(254,254,254,.38), transparent 100%),
    radial-gradient(1px 1px at 88% 21%, rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 30% 17%, rgba(195,215,255,.32), transparent 100%),
    radial-gradient(1px 1px at 60% 14%, rgba(254,254,254,.22), transparent 100%),
    radial-gradient(140% 26% at 50% 48%, rgba(243,208,106,0.12), transparent 60%);
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: var(--melt-height, clamp(340px, 44vh, 460px));
  margin-top: calc(-1 * var(--melt-overlap, clamp(90px, 12vh, 120px)));
  margin-bottom: calc(-1 * var(--melt-overlap, clamp(90px, 12vh, 120px)));
  pointer-events: none;
}

.melt__composite {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.003) 1.47%,
    rgba(0,0,0,0.019) 2.93%, rgba(0,0,0,0.058) 4.40%,
    rgba(0,0,0,0.122) 5.87%, rgba(0,0,0,0.210) 7.33%,
    rgba(0,0,0,0.317) 8.80%, rgba(0,0,0,0.438) 10.27%,
    rgba(0,0,0,0.562) 11.73%, rgba(0,0,0,0.683) 13.20%,
    rgba(0,0,0,0.790) 14.67%, rgba(0,0,0,0.878) 16.13%,
    rgba(0,0,0,0.942) 17.60%, rgba(0,0,0,0.981) 19.07%,
    rgba(0,0,0,0.997) 20.53%, rgba(0,0,0,1.000) 22.00%,
    rgba(0,0,0,1) 50%, rgba(0,0,0,1.000) 78.00%,
    rgba(0,0,0,0.997) 79.47%, rgba(0,0,0,0.981) 80.93%,
    rgba(0,0,0,0.942) 82.40%, rgba(0,0,0,0.878) 83.87%,
    rgba(0,0,0,0.790) 85.33%, rgba(0,0,0,0.683) 86.80%,
    rgba(0,0,0,0.562) 88.27%, rgba(0,0,0,0.438) 89.73%,
    rgba(0,0,0,0.317) 91.20%, rgba(0,0,0,0.210) 92.67%,
    rgba(0,0,0,0.122) 94.13%, rgba(0,0,0,0.058) 95.60%,
    rgba(0,0,0,0.019) 97.07%, rgba(0,0,0,0.003) 98.53%,
    rgba(0,0,0,0.000) 100.00%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.000) 0.00%, rgba(0,0,0,0.003) 1.47%,
    rgba(0,0,0,0.019) 2.93%, rgba(0,0,0,0.058) 4.40%,
    rgba(0,0,0,0.122) 5.87%, rgba(0,0,0,0.210) 7.33%,
    rgba(0,0,0,0.317) 8.80%, rgba(0,0,0,0.438) 10.27%,
    rgba(0,0,0,0.562) 11.73%, rgba(0,0,0,0.683) 13.20%,
    rgba(0,0,0,0.790) 14.67%, rgba(0,0,0,0.878) 16.13%,
    rgba(0,0,0,0.942) 17.60%, rgba(0,0,0,0.981) 19.07%,
    rgba(0,0,0,0.997) 20.53%, rgba(0,0,0,1.000) 22.00%,
    rgba(0,0,0,1) 50%, rgba(0,0,0,1.000) 78.00%,
    rgba(0,0,0,0.997) 79.47%, rgba(0,0,0,0.981) 80.93%,
    rgba(0,0,0,0.942) 82.40%, rgba(0,0,0,0.878) 83.87%,
    rgba(0,0,0,0.790) 85.33%, rgba(0,0,0,0.683) 86.80%,
    rgba(0,0,0,0.562) 88.27%, rgba(0,0,0,0.438) 89.73%,
    rgba(0,0,0,0.317) 91.20%, rgba(0,0,0,0.210) 92.67%,
    rgba(0,0,0,0.122) 94.13%, rgba(0,0,0,0.058) 95.60%,
    rgba(0,0,0,0.019) 97.07%, rgba(0,0,0,0.003) 98.53%,
    rgba(0,0,0,0.000) 100.00%);
}

.melt__field,
.melt__dark-aurora,
.melt__light-aurora,
.melt__dark-weave,
.melt__light-weave,
.melt__dark-vignette,
.melt__dark-noise,
.melt__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.melt__field {
  inset: -30px -20px;
  background: var(--melt-field);
  filter: blur(14px);
}

.melt__dark-aurora,
.melt__light-aurora {
  overflow: hidden;
}

.melt__dark-aurora::before,
.melt__light-aurora::before {
  content: "";
  position: absolute;
  left: -14%;
  right: -14%;
  height: 130%;
}

.melt__dark-aurora::before {
  top: -12%;
  background: var(--melt-dark-aurora);
  filter: var(--aeolus-aurora-blur);
}

.melt__light-aurora::before {
  bottom: -12%;
  background: var(--melt-light-aurora);
  filter: var(--aeolus-aurora-blur-light);
}

.melt__dark-aurora {
  -webkit-mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 34.00%,
    rgba(0,0,0,0.997) 35.87%, rgba(0,0,0,0.981) 37.73%,
    rgba(0,0,0,0.942) 39.60%, rgba(0,0,0,0.878) 41.47%,
    rgba(0,0,0,0.790) 43.33%, rgba(0,0,0,0.683) 45.20%,
    rgba(0,0,0,0.562) 47.07%, rgba(0,0,0,0.438) 48.93%,
    rgba(0,0,0,0.317) 50.80%, rgba(0,0,0,0.210) 52.67%,
    rgba(0,0,0,0.122) 54.53%, rgba(0,0,0,0.058) 56.40%,
    rgba(0,0,0,0.019) 58.27%, rgba(0,0,0,0.003) 60.13%,
    rgba(0,0,0,0.000) 62.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 34.00%,
    rgba(0,0,0,0.997) 35.87%, rgba(0,0,0,0.981) 37.73%,
    rgba(0,0,0,0.942) 39.60%, rgba(0,0,0,0.878) 41.47%,
    rgba(0,0,0,0.790) 43.33%, rgba(0,0,0,0.683) 45.20%,
    rgba(0,0,0,0.562) 47.07%, rgba(0,0,0,0.438) 48.93%,
    rgba(0,0,0,0.317) 50.80%, rgba(0,0,0,0.210) 52.67%,
    rgba(0,0,0,0.122) 54.53%, rgba(0,0,0,0.058) 56.40%,
    rgba(0,0,0,0.019) 58.27%, rgba(0,0,0,0.003) 60.13%,
    rgba(0,0,0,0.000) 62.00%, rgba(0,0,0,0) 100%);
}

.melt__light-aurora {
  -webkit-mask-image: linear-gradient(var(--melt-light-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 44.00%,
    rgba(0,0,0,0.997) 45.73%, rgba(0,0,0,0.981) 47.47%,
    rgba(0,0,0,0.942) 49.20%, rgba(0,0,0,0.878) 50.93%,
    rgba(0,0,0,0.790) 52.67%, rgba(0,0,0,0.683) 54.40%,
    rgba(0,0,0,0.562) 56.13%, rgba(0,0,0,0.438) 57.87%,
    rgba(0,0,0,0.317) 59.60%, rgba(0,0,0,0.210) 61.33%,
    rgba(0,0,0,0.122) 63.07%, rgba(0,0,0,0.058) 64.80%,
    rgba(0,0,0,0.019) 66.53%, rgba(0,0,0,0.003) 68.27%,
    rgba(0,0,0,0.000) 70.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-light-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 44.00%,
    rgba(0,0,0,0.997) 45.73%, rgba(0,0,0,0.981) 47.47%,
    rgba(0,0,0,0.942) 49.20%, rgba(0,0,0,0.878) 50.93%,
    rgba(0,0,0,0.790) 52.67%, rgba(0,0,0,0.683) 54.40%,
    rgba(0,0,0,0.562) 56.13%, rgba(0,0,0,0.438) 57.87%,
    rgba(0,0,0,0.317) 59.60%, rgba(0,0,0,0.210) 61.33%,
    rgba(0,0,0,0.122) 63.07%, rgba(0,0,0,0.058) 64.80%,
    rgba(0,0,0,0.019) 66.53%, rgba(0,0,0,0.003) 68.27%,
    rgba(0,0,0,0.000) 70.00%, rgba(0,0,0,0) 100%);
}

.melt__dark-weave {
  background: var(--aeolus-sailcloth-dark-soft);
  mix-blend-mode: overlay;
  /* The web melt is shorter than the component preview. Keep the source
     smootherstep, but finish it at the dark-aurora boundary so overlay weave
     cannot beat against the bright-gold stops on wide screens. */
  -webkit-mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 44.00%,
    rgba(0,0,0,0.997) 45.20%, rgba(0,0,0,0.981) 46.40%,
    rgba(0,0,0,0.942) 47.60%, rgba(0,0,0,0.878) 48.80%,
    rgba(0,0,0,0.790) 50.00%, rgba(0,0,0,0.683) 51.20%,
    rgba(0,0,0,0.562) 52.40%, rgba(0,0,0,0.438) 53.60%,
    rgba(0,0,0,0.317) 54.80%, rgba(0,0,0,0.210) 56.00%,
    rgba(0,0,0,0.122) 57.20%, rgba(0,0,0,0.058) 58.40%,
    rgba(0,0,0,0.019) 59.60%, rgba(0,0,0,0.003) 60.80%,
    rgba(0,0,0,0.000) 62.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 44.00%,
    rgba(0,0,0,0.997) 45.20%, rgba(0,0,0,0.981) 46.40%,
    rgba(0,0,0,0.942) 47.60%, rgba(0,0,0,0.878) 48.80%,
    rgba(0,0,0,0.790) 50.00%, rgba(0,0,0,0.683) 51.20%,
    rgba(0,0,0,0.562) 52.40%, rgba(0,0,0,0.438) 53.60%,
    rgba(0,0,0,0.317) 54.80%, rgba(0,0,0,0.210) 56.00%,
    rgba(0,0,0,0.122) 57.20%, rgba(0,0,0,0.058) 58.40%,
    rgba(0,0,0,0.019) 59.60%, rgba(0,0,0,0.003) 60.80%,
    rgba(0,0,0,0.000) 62.00%, rgba(0,0,0,0) 100%);
}

.melt__light-weave {
  background-image: var(--melt-light-weave);
  background-size: var(--melt-light-weave-size, auto);
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(var(--melt-light-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 13.00%,
    rgba(0,0,0,0.997) 14.80%, rgba(0,0,0,0.981) 16.60%,
    rgba(0,0,0,0.942) 18.40%, rgba(0,0,0,0.878) 20.20%,
    rgba(0,0,0,0.790) 22.00%, rgba(0,0,0,0.683) 23.80%,
    rgba(0,0,0,0.562) 25.60%, rgba(0,0,0,0.438) 27.40%,
    rgba(0,0,0,0.317) 29.20%, rgba(0,0,0,0.210) 31.00%,
    rgba(0,0,0,0.122) 32.80%, rgba(0,0,0,0.058) 34.60%,
    rgba(0,0,0,0.019) 36.40%, rgba(0,0,0,0.003) 38.20%,
    rgba(0,0,0,0.000) 40.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-light-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 13.00%,
    rgba(0,0,0,0.997) 14.80%, rgba(0,0,0,0.981) 16.60%,
    rgba(0,0,0,0.942) 18.40%, rgba(0,0,0,0.878) 20.20%,
    rgba(0,0,0,0.790) 22.00%, rgba(0,0,0,0.683) 23.80%,
    rgba(0,0,0,0.562) 25.60%, rgba(0,0,0,0.438) 27.40%,
    rgba(0,0,0,0.317) 29.20%, rgba(0,0,0,0.210) 31.00%,
    rgba(0,0,0,0.122) 32.80%, rgba(0,0,0,0.058) 34.60%,
    rgba(0,0,0,0.019) 36.40%, rgba(0,0,0,0.003) 38.20%,
    rgba(0,0,0,0.000) 40.00%, rgba(0,0,0,0) 100%);
}

.melt__dark-vignette {
  background: var(--aeolus-vignette-dense);
  -webkit-mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 30.00%,
    rgba(0,0,0,0.997) 32.00%, rgba(0,0,0,0.981) 34.00%,
    rgba(0,0,0,0.942) 36.00%, rgba(0,0,0,0.878) 38.00%,
    rgba(0,0,0,0.790) 40.00%, rgba(0,0,0,0.683) 42.00%,
    rgba(0,0,0,0.562) 44.00%, rgba(0,0,0,0.438) 46.00%,
    rgba(0,0,0,0.317) 48.00%, rgba(0,0,0,0.210) 50.00%,
    rgba(0,0,0,0.122) 52.00%, rgba(0,0,0,0.058) 54.00%,
    rgba(0,0,0,0.019) 56.00%, rgba(0,0,0,0.003) 58.00%,
    rgba(0,0,0,0.000) 60.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 30.00%,
    rgba(0,0,0,0.997) 32.00%, rgba(0,0,0,0.981) 34.00%,
    rgba(0,0,0,0.942) 36.00%, rgba(0,0,0,0.878) 38.00%,
    rgba(0,0,0,0.790) 40.00%, rgba(0,0,0,0.683) 42.00%,
    rgba(0,0,0,0.562) 44.00%, rgba(0,0,0,0.438) 46.00%,
    rgba(0,0,0,0.317) 48.00%, rgba(0,0,0,0.210) 50.00%,
    rgba(0,0,0,0.122) 52.00%, rgba(0,0,0,0.058) 54.00%,
    rgba(0,0,0,0.019) 56.00%, rgba(0,0,0,0.003) 58.00%,
    rgba(0,0,0,0.000) 60.00%, rgba(0,0,0,0) 100%);
}

.melt__dark-noise {
  opacity: 0.1;
  mix-blend-mode: overlay;
  background-image: var(--aeolus-noise-image);
  -webkit-mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 35.00%,
    rgba(0,0,0,0.997) 37.00%, rgba(0,0,0,0.981) 39.00%,
    rgba(0,0,0,0.942) 41.00%, rgba(0,0,0,0.878) 43.00%,
    rgba(0,0,0,0.790) 45.00%, rgba(0,0,0,0.683) 47.00%,
    rgba(0,0,0,0.562) 49.00%, rgba(0,0,0,0.438) 51.00%,
    rgba(0,0,0,0.317) 53.00%, rgba(0,0,0,0.210) 55.00%,
    rgba(0,0,0,0.122) 57.00%, rgba(0,0,0,0.058) 59.00%,
    rgba(0,0,0,0.019) 61.00%, rgba(0,0,0,0.003) 63.00%,
    rgba(0,0,0,0.000) 65.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,1) 0%, rgba(0,0,0,1.000) 35.00%,
    rgba(0,0,0,0.997) 37.00%, rgba(0,0,0,0.981) 39.00%,
    rgba(0,0,0,0.942) 41.00%, rgba(0,0,0,0.878) 43.00%,
    rgba(0,0,0,0.790) 45.00%, rgba(0,0,0,0.683) 47.00%,
    rgba(0,0,0,0.562) 49.00%, rgba(0,0,0,0.438) 51.00%,
    rgba(0,0,0,0.317) 53.00%, rgba(0,0,0,0.210) 55.00%,
    rgba(0,0,0,0.122) 57.00%, rgba(0,0,0,0.058) 59.00%,
    rgba(0,0,0,0.019) 61.00%, rgba(0,0,0,0.003) 63.00%,
    rgba(0,0,0,0.000) 65.00%, rgba(0,0,0,0) 100%);
}

.melt__stars {
  background: var(--melt-stars);
}

/* Dark to light: source orientation, dark at the top. */
.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"])[data-to="cream"] {
  --melt-field: linear-gradient(to bottom,
    #070A12 0%, #070A12 26%, #101830 33%, #2e3550 40%,
    #6b5a4e 47%, #C89A3A 54%, #E8B44A 61%, #EAD9AE 68%,
    var(--aeolus-cream) 74%, var(--aeolus-cream) 100%);
}

.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"])[data-to="gold"] {
  --melt-field: linear-gradient(to bottom,
    #070A12 0%, #070A12 26%, #101830 33%, #2e3550 40%,
    #6b5a4e 47%, #C89A3A 54%, #E8B44A 61%,
    var(--aeolus-gold-400) 74%, var(--aeolus-gold-400) 100%);
}

/* Light to dark: flip every source-side mask, layer position, and star field. */
.melt:not([data-from]),
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) {
  --melt-dark-direction: to top;
  --melt-light-direction: to bottom;
  --melt-stars:
    radial-gradient(1.3px 1.3px at 17% 70%, rgba(254,254,254,.55), transparent 100%),
    radial-gradient(1px 1px at 72% 75%, rgba(243,208,106,.42), transparent 100%),
    radial-gradient(1px 1px at 44% 68%, rgba(254,254,254,.38), transparent 100%),
    radial-gradient(1px 1px at 88% 79%, rgba(254,254,254,.30), transparent 100%),
    radial-gradient(1px 1px at 30% 83%, rgba(195,215,255,.32), transparent 100%),
    radial-gradient(1px 1px at 60% 86%, rgba(254,254,254,.22), transparent 100%),
    radial-gradient(140% 26% at 50% 52%, rgba(243,208,106,0.12), transparent 60%);
}

.melt:not([data-from]) .melt__dark-aurora::before,
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) .melt__dark-aurora::before {
  top: auto;
  bottom: -12%;
}

.melt:not([data-from]) .melt__light-aurora::before,
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) .melt__light-aurora::before {
  top: -12%;
  bottom: auto;
}

/* The full cream aurora contains a blue lobe at its own bottom edge. Carrying
   that lobe to the melt's light endpoint creates a pale-blue handoff because
   the next cream section starts at the aurora's top edge. Keep the tail over
   the gold portion, then smootherstep it to zero before #EAD9AE -> cream. */
.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"])[data-to="cream"] .melt__light-aurora,
.melt[data-from="cream"]:is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) .melt__light-aurora {
  -webkit-mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.000) 40.00%,
    rgba(0,0,0,0.003) 40.93%, rgba(0,0,0,0.019) 41.87%,
    rgba(0,0,0,0.058) 42.80%, rgba(0,0,0,0.122) 43.73%,
    rgba(0,0,0,0.210) 44.67%, rgba(0,0,0,0.317) 45.60%,
    rgba(0,0,0,0.438) 46.53%, rgba(0,0,0,0.562) 47.47%,
    rgba(0,0,0,0.683) 48.40%, rgba(0,0,0,0.790) 49.33%,
    rgba(0,0,0,0.878) 50.27%, rgba(0,0,0,0.942) 51.20%,
    rgba(0,0,0,0.981) 52.13%, rgba(0,0,0,0.997) 53.07%,
    rgba(0,0,0,1.000) 54.00%, rgba(0,0,0,1) 58.00%,
    rgba(0,0,0,0.997) 58.80%, rgba(0,0,0,0.981) 59.60%,
    rgba(0,0,0,0.942) 60.40%, rgba(0,0,0,0.878) 61.20%,
    rgba(0,0,0,0.790) 62.00%, rgba(0,0,0,0.683) 62.80%,
    rgba(0,0,0,0.562) 63.60%, rgba(0,0,0,0.438) 64.40%,
    rgba(0,0,0,0.317) 65.20%, rgba(0,0,0,0.210) 66.00%,
    rgba(0,0,0,0.122) 66.80%, rgba(0,0,0,0.058) 67.60%,
    rgba(0,0,0,0.019) 68.40%, rgba(0,0,0,0.003) 69.20%,
    rgba(0,0,0,0.000) 70.00%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(var(--melt-dark-direction),
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.000) 40.00%,
    rgba(0,0,0,0.003) 40.93%, rgba(0,0,0,0.019) 41.87%,
    rgba(0,0,0,0.058) 42.80%, rgba(0,0,0,0.122) 43.73%,
    rgba(0,0,0,0.210) 44.67%, rgba(0,0,0,0.317) 45.60%,
    rgba(0,0,0,0.438) 46.53%, rgba(0,0,0,0.562) 47.47%,
    rgba(0,0,0,0.683) 48.40%, rgba(0,0,0,0.790) 49.33%,
    rgba(0,0,0,0.878) 50.27%, rgba(0,0,0,0.942) 51.20%,
    rgba(0,0,0,0.981) 52.13%, rgba(0,0,0,0.997) 53.07%,
    rgba(0,0,0,1.000) 54.00%, rgba(0,0,0,1) 58.00%,
    rgba(0,0,0,0.997) 58.80%, rgba(0,0,0,0.981) 59.60%,
    rgba(0,0,0,0.942) 60.40%, rgba(0,0,0,0.878) 61.20%,
    rgba(0,0,0,0.790) 62.00%, rgba(0,0,0,0.683) 62.80%,
    rgba(0,0,0,0.562) 63.60%, rgba(0,0,0,0.438) 64.40%,
    rgba(0,0,0,0.317) 65.20%, rgba(0,0,0,0.210) 66.00%,
    rgba(0,0,0,0.122) 66.80%, rgba(0,0,0,0.058) 67.60%,
    rgba(0,0,0,0.019) 68.40%, rgba(0,0,0,0.003) 69.20%,
    rgba(0,0,0,0.000) 70.00%, rgba(0,0,0,0) 100%);
}

.melt[data-from="gold"]:is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) {
  --melt-field: linear-gradient(to bottom,
    var(--aeolus-gold-400) 0%, var(--aeolus-gold-400) 26%,
    #E8B44A 39%, #C89A3A 46%, #6b5a4e 53%, #2e3550 60%,
    #101830 67%, #070A12 74%, #070A12 100%);
}

/* Gold is the light-side composition only in mixed transitions that touch it. */
.melt[data-from="gold"],
.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"])[data-to="gold"] {
  --melt-light-aurora:
    radial-gradient(56% 74% at 88% 8%, #FFF0C4 0%, rgba(255,240,196,0) 62%),
    radial-gradient(52% 66% at 12% 92%, #C96A2E 0%, rgba(201,106,46,0) 64%),
    radial-gradient(46% 60% at 44% 34%, #E8B44A 0%, rgba(232,180,74,0) 66%);
  --melt-light-weave: var(--aeolus-sailcloth-gold);
  --melt-light-weave-size: auto;
}

/* The dark-side aurora comes from the source preset; nightCool cools the rust lobe. */
.melt[data-from="nightCool"],
.melt:is([data-from="cream"], [data-from="gold"])[data-to="nightCool"] {
  --melt-dark-aurora:
    radial-gradient(58% 74% at 12% 24%, #1B4B6B 0%, rgba(27,75,107,0) 62%),
    radial-gradient(64% 76% at 60% 98%, rgba(27,75,107,0.42) 0%, rgba(27,75,107,0) 72%),
    radial-gradient(54% 64% at 82% 14%, rgba(197,145,42,0.30) 0%, rgba(197,145,42,0) 70%),
    radial-gradient(60% 78% at 98% 62%, #0B1020 0%, rgba(11,16,32,0) 66%);
}

/* Same-family behavior is preserved from SectionTransition. */
.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"]):is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) {
  --melt-field: linear-gradient(to bottom, #070A12 0%, #070A12 100%);
}

.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"]):is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) .melt__light-aurora,
.melt:is([data-from="night"], [data-from="nightHero"], [data-from="nightCool"]):is([data-to="night"], [data-to="nightHero"], [data-to="nightCool"]) .melt__light-weave {
  display: none;
}

.melt[data-from="cream"][data-to="cream"] {
  --melt-field: linear-gradient(to bottom, var(--aeolus-cream) 0%, var(--aeolus-cream) 100%);
}

.melt[data-from="cream"][data-to="gold"] {
  --melt-field: linear-gradient(to bottom, var(--aeolus-cream) 0%, var(--aeolus-gold-400) 100%);
}

.melt[data-from="gold"][data-to="cream"] {
  --melt-field: linear-gradient(to bottom, var(--aeolus-gold-400) 0%, var(--aeolus-cream) 100%);
}

.melt[data-from="gold"][data-to="gold"] {
  --melt-field: linear-gradient(to bottom, var(--aeolus-gold-400) 0%, var(--aeolus-gold-400) 100%);
}

.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="cream"], [data-to="gold"]) .melt__dark-aurora,
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="cream"], [data-to="gold"]) .melt__dark-weave,
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="cream"], [data-to="gold"]) .melt__dark-vignette,
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="cream"], [data-to="gold"]) .melt__dark-noise,
.melt:is([data-from="cream"], [data-from="gold"]):is([data-to="cream"], [data-to="gold"]) .melt__stars,
.melt[data-stars="false"] .melt__stars,
.melt.melt-no-stars .melt__stars {
  display: none;
}