/*
 The glowing border as made by Kevin Powell
 in "Make an animated glowing border effect with CSS"
*/

/*=== GLOWING BORDER ===*/
@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;
}
@property --glow-deg {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}

.glowing-border {
	--gradient-glow:
		var(--clr-1),
		var(--clr-2),
		var(--clr-3),
		var(--clr-4),
		var(--clr-5),
		var(--clr-1);
	--glow-intensity: 0.125;
	--glowing-border-width: 3px;
	
	margin-block: 3rem;
	padding: 8rem 3rem;
	max-width: 60ch;
	
	border: var(--glowing-border-width, 3px) solid transparent;
	border-left: 0px;
	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 10s infinite linear;
}

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

.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: -1.5rem;
	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 {
	--gradient-glow: yellow, green, orange, green, yellow;
	margin-inline-start: auto;
	border-radius: 100vw 0 0 100vw;
	border: var(--glowing-border-width, 3px) solid transparent;
	border-right: 0px;
	
	&::before {
		transform-origin: left;
	}
}

@layer general-styling {
	* {
		box-sizing: border-box;
	}
	html {
		font-family: system-ui;
		/*color-scheme: dark;*/
	}
}



/* ========== TEST GLOWING BORDER EFFECT =========*/
/*  made by some else, not as good */
.glowing-border-test {
	/*margin: 0 auto;*/
	/*padding: 2em;*/
	/*width: 300px;*/
	/*background: #1c1f2b;*/
	background: var(--neutral-0);
	/*text-align: center;*/
	border-radius: 10px;
	position: relative;
}
@property --glowing-border-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
.glowing-border-test::after, .glowing-border-test::before {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	/*background: conic-gradient(red, blue);*/
	/*background: conic-gradient(red, orange, red, yellow, red, red);*/
	/*background: conic-gradient(from var(--glowing-border-angle), transparent 50%, red, orange, red, yellow, red, red);*/
	background: conic-gradient(from var(--glowing-border-angle), red, orange, red, yellow, red, red);
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	z-index: -1;
	padding: 3px; /*The padding functions as the border */
	border-radius: 10px;
	animation: 3s glowing-border-spin linear infinite;
}
.glowing-border-test::before {
	/*background: conic-gradient(red, blue);*/
	/*background: conic-gradient(red, orange, red, yellow, red, red);*/
	/*background: conic-gradient(from var(--glowing-border-angle), transparent 50%, red, orange, red, yellow, red, red);*/
	/*background: conic-gradient(from var(--glowing-border-angle), transparent 30%, red, transparent 20%, yellow);
	animation: 5s glowing-border-spin linear infinite;*/
}
.glowing-border-test::before {
	filter: blur(1.5rem);
	opacity: 0.5;
}
@keyframes glowing-border-spin{
	from{
		--glowing-border-angle: 0deg;
	}
	to{
		--glowing-border-angle: 360deg;
	}
}	

/* == TEST WITH VOLCANO ==*/

/*.background-box-2columns::before {
	--gradient-glow:
		var(--clr-1),
		var(--clr-2),
		var(--clr-3),
		var(--clr-4),
		var(--clr-5),
		var(--clr-1);
	--glow-intensity: 0.125;
	--glowing-border-width: 3px;
	
	margin-block: 3rem;
	padding: 8rem 3rem;
	
	border: var(--glowing-border-width, 3px) solid transparent !important;
	border-left: 0px;
	border-radius: 0 100vw 100vw 0;
	background: linear-gradient(var(--brand-primary-l-4, Canvas) 0 0) padding-box,
		conic-gradient(from var(--glow-deg), var(--gradient-glow)) border-box;
	position: relative;
	isolation: isolate;
	
	animation: background-box-2columns-glow 20s infinite linear;
	
}

@keyframes background-box-2columns-glow {
	100% {
		--glow-deg: 360deg;
	}
}

.volcano.background-box-2columns::before {
  	--gradient-glow: red, orange, yellow, var(--brand-primary), red, yellow, var(--brand-primary), yellow, orange, red, yellow,red;
	--glowing-border-width: 1px;
}
.geology.background-box-2columns::before {
  --gradient-glow: var(--brand-primary), var(--neutral-200), var(--brand-primary-d-4), var(--brand-primary-l-3), var(--brand-primary-l-1), var(--brand-primary-d-4), var(--neutral-300), var(--brand-primary-l-3), var(--brand-primary);
  --glowing-border-width: 1px;
}
.tsunami.background-box-2columns::before {
  --gradient-glow: aqua, darkblue, aliceblue, cornflowerblue, aliceblue, darkblue, azure, darkblue, aqua, steelblue, darkblue, aliceblue, powderblue, skyblue, darkblue, paleturquoise, royalblue, aqua;
	--glowing-border-width: 1px;
}*/