@import "normalize.css"; 

:root {
	--border-radius : 8px;
	--conic-gradient: conic-gradient(from 180deg at 50% 70%,hsla(0,0%,98%,1) 0deg, var(--theme-color-1) 72.0000010728836deg, var(--theme-color-2) 144.0000021457672deg,var(--theme-color-3) 216.00000858306885deg, var(--theme-color-4) 288.0000042915344deg,hsla(0,0%,98%,1) 1turn);
}
@property --start {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}
.animation-main {
	--spread: 60;
	touch-action: none;  
}
.animation-box {
	--active: 0.15;
	--start: 0;
	/* aspect-ratio: 330 / 400; */
	position: relative;
	border-radius: var(--border-radius);
}
.animation-box:is(:hover, :focus-visible) {
  z-index: 2;
}
.glows {
	pointer-events: none;
	position: absolute;
	inset: 0;
	filter: blur(calc(var(--blur) * 1px));
}
.glows::after,
.glows::before {
	--alpha: 0;
	content: "";
  	background: var(--conic-gradient);
  	background-attachment: fixed;
	border-radius: var(--border-radius);
  	position: absolute;
	inset: -5px;
  	border: 10px solid transparent;
  	-webkit-mask: linear-gradient(#0000, #0000), conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
	mask: linear-gradient(#0000, #0000), conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
  	-webkit-mask-composite: source-in, xor;
	mask-composite: intersect;
  	-webkit-mask-clip: padding-box, border-box;
	mask-clip: padding-box, border-box;
  	opacity: var(--active);
  	transition: opacity 1s;
}
.animation-box::before {
	position: absolute;
	inset: 0;
	border: 2px solid transparent;
	content: "";
	pointer-events: none;
	background: var(--bg-color2);
  	background-attachment: fixed;
  	border-radius: var(--border-radius);
  	-webkit-mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),hsl(0 0% 100% / 0.15) 0deg,white,hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg));
	mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),hsl(0 0% 100% / 0.15) 0deg,white,hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg));
	-webkit-mask-clip: padding-box, border-box;
	mask-clip: padding-box, border-box;
  	-webkit-mask-composite: source-in, xor;
	mask-composite: intersect;
  	opacity: var(--active);
  	transition: opacity 1s;
}
.animation-box::after {
	--bg-size: 100%;
  	content: "";
  	pointer-events: none;
  	position: absolute;
  	background: var(--conic-gradient);
  	background-attachment: fixed;
  	border-radius: var(--border-radius);
  	opacity: var(--active, 0);
  	transition: opacity 1s;
  	--alpha: 0;
  	inset: 0;
  	border: 2px solid transparent;
  	-webkit-mask: linear-gradient(#0000, #0000),conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
	mask: linear-gradient(#0000, #0000),conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
  	filter: brightness(1.5);
  	-webkit-mask-clip: padding-box, border-box;
	mask-clip: padding-box, border-box;
  	-webkit-mask-composite: source-in, xor;
	mask-composite: intersect;
}