@property --glow-deg {
  syntax: "<angle>";
  inherits: true;
  initial-value: -90deg;
}


/* the colors don't need to be registed */
@property --clr-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: red;
}

@property --clr-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: yellow;
}

@property --clr-3 {
  syntax: "<color>";
  inherits: true;
  initial-value: green;
}

@property --clr-4 {
  syntax: "<color>";
  inherits: true;
  initial-value: blue;
}

@property --clr-5 {
  syntax: "<color>";
  inherits: true;
  initial-value: purple;
}

.glowing-border {
  --gradient-glow: var(--clr-1), var(--clr-2), var(--clr-3), var(--clr-4),
    var(--clr-5), var(--clr-1);

  margin-block: 3rem;
  padding: 8rem 3rem;
  max-width: 80vw;

  border: var(--border-width, 3px) solid transparent;
  border-left: 0;
  border-radius: 0 100vw 100vw 0;
  background: linear-gradient(var(--surface, canvas) 0 0) padding-box,
    conic-gradient(from var(--glow-deg), var(--gradient-glow)) border-box;

	position: relative;
  isolation: isolate;

  animation: glow 5s infinite linear;
}

@keyframes glow {
  100% {
    --glow-deg: 270deg;
  }
}

.glowing-border::before,
.glowing-border::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.glowing-border::before {
  z-index: -1;
  background: var(--surface, canvas);
  inset: 0.5rem;
  scale: 1.2 1;
  transform-origin: right;
  filter: blur(var(--glow-size, 1rem));
}

.glowing-border::after {
  z-index: -2;
  inset: -3rem;
  background: conic-gradient(from var(--glow-deg), var(--gradient-glow));
  filter: blur(var(--glow-size, 1rem));
  opacity: var(--glow-intensity, 0.125);
}

.glowing-border.right {
  margin-inline-start: auto;
  border-radius: 100vw 0 0 100vw;
  border: var(--border-width, 3px) solid transparent;
  border-right: 0;
	text-align: right;

  &::before {
    transform-origin: left;
  }
}

@layer general-styling {
  * {
    box-sizing: border-box;
  }

  html {
    font-family: system-ui;
    color-scheme: dark;
  }

	body {
    margin: 0;
    overflow-x: clip;

    /* --surface: purple; */

    background: var(--surface);
  }
}

header {
	text-align: center;
}

.animation-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
}

.dot {
	position: absolute;
	border-radius: 50%;
	opacity: 0.7;
}

.dot1 {
	width: 15rem;
	height: 15rem;
	background-color: var(--clr-1);
	box-shadow: 0 0 2rem 1rem var(--clr-1),
					0 0 4rem 2rem var(--clr-1);
	top: 10%;
	left: 70%;
	animation: moveDot1 25s infinite alternate ease-in-out;
}

.dot2 {
	width: 15rem;
	height: 15rem;
	background-color: var(--clr-2);
	box-shadow: 0 0 2rem 1rem var(--clr-2),
					0 0 4rem 2rem var(--clr-2);
	top: 5%;
	left: 50%;
	animation: moveDot2 30s infinite alternate ease-in-out;
}

.dot3 {
	width: 20rem;
	height: 20rem;
	background-color: var(--clr-3);
	box-shadow: 0 0 3rem 2rem var(--clr-3),
					0 0 6rem 4rem var(--clr-3);
	top: 8%;
	left: 30%;
	animation: moveDot3 35s infinite alternate ease-in-out;
}

.dot4 {
	width: 8rem;
	height: 8rem;
	background-color: var(--clr-4);
	box-shadow: 0 0 1rem 1rem var(--clr-4),
					0 0 2rem 2rem var(--clr-4);
	top: 8%;
	left: 60%;
	animation: moveDot4 20s infinite alternate ease-in-out;
}

@keyframes moveDot1 {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0.7;
	}
	50% {
		transform: translate(100px, 100px) scale(2.5);
		opacity: 0.5;
	}
	100% {
		transform: translate(-50px, -80px) scale(1);
		opacity: 0.7;
	}
}

@keyframes moveDot2 {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0.7;
	}
	50% {
		transform: translate(150px, 80px) scale(2);
		opacity: 0.5;
	}
	100% {
		transform: translate(-30px, -10px) scale(1);
		opacity: 0.7;
	}
}

@keyframes moveDot3 {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0.7;
	}
	50% {
		transform: translate(50px, 50px) scale(2);
		opacity: 0.5;
	}
	100% {
		transform: translate(-50px, -50px) scale(1);
		opacity: 0.7;
	}
}

@keyframes moveDot4 {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0.3;
	}
	50% {
		transform: translate(90px, 20px) scale(3);
		opacity: 0.5;
	}
	100% {
		transform: translate(-50px, -80px) scale(2);
		opacity: 0.4;
	}
}