/* korriwan.com: the sky, the sun or moon, the four ridgelines and the mist over their foot. */
@layer clearing {
  .sky {
    --h: calc(100% - var(--under));   /* the height of the clearing itself */
    position: absolute;
    inset: 0 0 calc(-1 * var(--under)) 0;
    background: linear-gradient(180deg, var(--sky-1) 0, var(--sky-2) calc(var(--h) * .44), var(--sky-3) calc(var(--h) * .76), var(--sky-4) var(--h));
  }
  .orb {
    position: absolute;
    top: clamp(104px, 11vw, 122px);
    right: clamp(7%, 14vw, 17%);
    width: clamp(54px, 6vw, 80px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 36%, var(--spark), var(--orb) 64%);
    box-shadow: 0 0 70px 26px var(--orb-bloom), 0 0 240px 96px var(--orb-far);
  }
  .orb::after {
    content: "";
    position: absolute;
    inset: clamp(-72px, -6vw, -40px);
    border-radius: 50%;
    background: radial-gradient(closest-side,
      transparent 68%,
      color-mix(in srgb, var(--aisha) 18%, transparent) 76%,
      color-mix(in srgb, var(--tecna) 16%, transparent) 85%,
      color-mix(in srgb, var(--flora) 10%, transparent) 93%,
      transparent 100%);
    opacity: var(--night);
  }
  .ridges {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    width: 100%;
    height: var(--land);
    overflow: visible;
  }
  .rs-1 { stop-color: var(--ridge-1); }
  .rs-2 { stop-color: var(--ridge-2); }
  .rs-3 { stop-color: var(--ridge-3); }
  .rs-4 { stop-color: var(--ridge-4); }
  .rs-fade { stop-opacity: .3; }
  .mist {
    --h: calc(var(--land) * .7);   /* its depth inside the clearing */
    position: absolute;
    inset: auto 0 calc(-1 * var(--under)) 0;
    height: calc(var(--h) + var(--under));
    background: linear-gradient(to bottom,
      transparent 0,
      color-mix(in srgb, var(--ground) 46%, transparent) calc(var(--h) * .52),
      color-mix(in srgb, var(--ground) 80%, transparent) var(--h));
  }
}