/*==========================================================
    Ellipse Backgrounds
==========================================================*/

.ellipse {
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;
  view-timeline: --section-view block;

  &::after {
    position: absolute;
    content: "";
    top: 2rem;
    width: clamp(100px, 100vw + 200px, 140vw);
    box-sizing: border-box;
    height: clamp(450px, 90%, 800px);
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    border: 60px solid oklch(from var(--colour-brand) 0.9 c h / 0.1);
    background: transparent;
    animation-name: ellipse-glow;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --section-view;
    animation-range: entry 30% exit 70%;
  }
  &.ellipse--right::after {
    right: -50vw;
  }
  &.ellipse--left::after {
    left: -50vw;
  }
}

.ellipse--temperature::after {
  border-color: oklch(
    from var(--colour-brand) 0.9 c var(--temperature-col-h) / 0.08
  );
  animation-name: none;
}

@keyframes ellipse-glow {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}

@media (width <= 1024px) {
  .hero-ellipse-wrap {
    left: 50% !important;
    top: 10% !important;
    height: clamp(420px, 60vw, 550px) !important;
    transform: translate(-50%, 0%);
    width: clamp(470px, 130vw, 1024px);
    height: clamp(390px, 58vw, 500px) !important;
  }
  .hero-ellipse {
    background: radial-gradient(
      circle at 50% 22%,
      oklch(from var(--primary-col) 0.25 c h),
      oklch(from var(--primary-col) 0.05 c h) 70%
    );
  }
}



/*==========================================================
    Atmospheres
==========================================================*/

@property --atmosphere-alpha {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.03;
}

@keyframes atmosphere-glow {
  0% {
    --atmosphere-alpha: 0.01;
  }
  50% {
    --atmosphere-alpha: 0.12;
  }
  100% {
    --atmosphere-alpha: 0.01;
  }
}

.section--white {
  animation-name: atmosphere-glow;
  animation-duration: auto;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry 30% exit 70%;
  background: radial-gradient(
    circle at var(--atmosphere-x, 50%) var(--atmosphere-y, 50%),
    rgb(255 255 255 / var(--atmosphere-alpha)),
    transparent 50%
  ) !important;
}

.section--green {
  animation-name: atmosphere-glow;
  animation-duration: auto;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry 30% exit 70%;
  background: radial-gradient(
    circle at var(--atmosphere-x, 50%) var(--atmosphere-y, 50%),
    oklch(from var(--colour-brand) l c h / var(--atmosphere-alpha)),
    transparent 50%
  ) !important;
}

.section--temperature {
  animation-name: atmosphere-glow;
  animation-duration: auto;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry 30% exit 70%;
  background: radial-gradient(
    circle at var(--atmosphere-x, 50%) var(--atmosphere-y, 50%),
    oklch(
      from var(--colour-brand) l c var(--temperature-col-h) /
        var(--atmosphere-alpha)
    ),
    transparent 50%
  ) !important;
}