@keyframes hero-gradient-animation {
	0% {
		--c-0: rgba(255, 255, 255, 1);
		--y-0: 80%;
		--s-start-0: 1%;
		--s-end-0: 45%;
		--x-0: 85%;
		--s-start-1: 5%;
		--s-end-1: 50%;
		--y-1: 12%;
		--c-1: rgba(198, 255, 247, 0.7);
		--x-1: 75%;
		--c-2: rgba(255, 207, 236, 0.7);
		--x-2: 45%;
		--y-2: 75%;
		--s-start-2: 10%;
		--s-end-2: 65%;
		--y-3: 7%;
		--c-3: rgba(219, 255, 211, 0.7);
		--x-3: 24%;
		--s-start-3: 5%;
		--s-end-3: 50%;
		--y-4: 50%;
		--c-4: rgba(219, 255, 250, 0.7);
		--x-4: 80%;
		--s-start-4: 5%;
		--s-end-4: 50%;
	}

	100% {
		--c-0: rgba(255, 255, 255, 1);
		--y-0: 94%;
		--s-start-0: 1%;
		--s-end-0: 45%;
		--x-0: 20%;
		--s-start-1: 1%;
		--s-end-1: 67%;
		--y-1: 70%;
		--c-1: rgba(198, 255, 247, 0.7);
		--x-1: 34%;
		--c-2: rgba(255, 207, 236, 0.7);
		--x-2: 78%;
		--y-2: 35%;
		--s-start-2: 5%;
		--s-end-2: 40%;
		--y-3: 70%;
		--c-3: rgba(219, 255, 211, 0.7);
		--x-3: 68%;
		--s-start-3: 13%;
		--s-end-3: 68%;
		--y-4: 90%;
		--c-4: rgba(219, 255, 250, 0.7);
		--x-4: 10%;
		--s-start-4: 1%;
		--s-end-4: 60%;
	}
}

@property --c-0 {
	syntax: '<color>';
	inherits: false;
	initial-value: rgb(255, 255, 255)
}

@property --y-0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 80%
}

@property --s-start-0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 9%
}

@property --s-end-0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 55%
}

@property --x-0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 85%
}

@property --s-start-1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 5%
}

@property --s-end-1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 72%
}

@property --y-1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 24%
}

@property --c-1 {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(219.99999999999997, 100%, 82%, 1)
}

@property --x-1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 60%
}

@property --c-2 {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(0, 0%, 0%, 1)
}

@property --x-2 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 13%
}

@property --y-2 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 82%
}

@property --s-start-2 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 10%
}

@property --s-end-2 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 23%
}

@property --y-3 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 7%
}

@property --c-3 {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(182, 72%, 68%, 1)
}

@property --x-3 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 24%
}

@property --s-start-3 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 13%
}

@property --s-end-3 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 68%
}

@property --y-4 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 7%
}

@property --c-4 {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(182, 72%, 68%, 1)
}

@property --x-4 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 24%
}

@property --s-start-4 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 13%
}

@property --s-end-4 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 68%
}


.bg-animated {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	/* Important */
	overflow: hidden;
	/* Keep gradient inside */
	--c-0: hsla(150.8823529411765, 52%, 83%, 1);
	--y-0: 80%;
	--x-0: 85%;
	--y-1: 24%;
	--c-1: hsla(219.99999999999997, 100%, 82%, 1);
	--x-1: 60%;
	--c-2: hsla(0, 0%, 0%, 0.49);
	--x-2: 13%;
	--y-2: 82%;
	--y-3: 7%;
	--c-3: hsla(182, 72%, 68%, 1);
	--x-3: 24%;
	--y-4: 7%;
	--c-4: rgba(217, 255, 179);
	--x-4: 24%;
	--mouse-x: 50%;
	--mouse-y: 50%;
	background-color: rgb(255, 255, 255);
	background-image:
		url("img/texture.png"),
		radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)),
		radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)),
		radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)),
		radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)),
		radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4));
	animation: hero-gradient-animation 10s ease-in-out infinite alternate;
	background-blend-mode: overlay, multiply, multiply, multiply, multiply, normal;
	background-size: 100px, auto, auto, auto, auto, auto;
	will-change: background-image;
    transform: translateZ(0); /* Force GPU acceleration */
}

/* Optimized static state for Safari */
body[data-browser="safari"] .bg-animated {
    animation: none;
    /* Adjust gradient positions to a more balanced state */
    --x-0: 10%; /* WHITE*/
    --y-0: 10%;

    --x-1: 100%; /* WHITE */
    --y-1: 100%;
    
	--x-2: 70%; /* PINK*/
    --y-2: 0%;
    
	--x-3: 15%; /* BLUE*/
    --y-3: 65%;
    
	--x-4: 60%; /* GREEN*/
    --y-4: 60%;
    /* Reduce gradient opacity/strength */
    --c-0: rgba(255, 255, 255, 1);
    --c-1: rgba(255, 255, 255, 1);
    --c-2: rgba(255, 55, 232, 1);
    --c-3: rgba(18, 243, 255, 1);
	--c-4: rgba(42, 255, 110, 1);
    /* Control size of each gradient */
    --s-start-0: 1%;
    --s-end-0: 100%;
    --s-start-1: 1%;
    --s-end-1: 100%;
    --s-start-2: 1%;
    --s-end-2: 50%;
    --s-start-3: 1%;
    --s-end-3: 50%;
    --s-start-4: 1%;
    --s-end-4: 70%;
	/* Adjust blend modes for better visual effect */
    background-blend-mode: soft-light, normal, normal, multiply, multiply, multiply;
}