.heroSelector {
  --aksel-website-hero-selector-x: ;
  --aksel-website-hero-selector-y: ;

  clip-path: circle(140% at var(--aksel-website-hero-selector-x) var(--aksel-website-hero-selector-y));
  animation: clipExpand 800ms cubic-bezier(0.3, 0, 0.15, 1);
  height: fit-content;
  min-height: 100%;
}

@keyframes clipExpand {
  0% {
    clip-path: circle(0% at var(--aksel-website-hero-selector-x) var(--aksel-website-hero-selector-y));
  }

  100% {
    clip-path: circle(140% at var(--aksel-website-hero-selector-x) var(--aksel-website-hero-selector-y));
  }
}

.heroGradient {
  background: linear-gradient(85deg, #5eead4 0%, #99f6e4 48%, #99f6e4 100%);
}

.heroGradientOpen {
  background: linear-gradient(265deg, #14b8a6 0%, #2dd4bf 48.5%, #2dd4bf 100%);
}
