/* ==========================================================================
   SSI HERO — RICH ANIMATED AURORA BACKGROUND
   ========================================================================== */

.ssi-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;

	background:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#fbfdff 40%,
			#f3f7ff 100%
		);
}


/* ==========================================================================
   MAIN AURORA
   ========================================================================== */

.ssi-hero::before {
	content: "";

	position: absolute;
	inset: -32%;

	z-index: -4;

	background:
		radial-gradient(
			ellipse 48% 60% at 8% 42%,
			rgba(
				245,
				190,
				74,
				0.27
			),
			transparent 68%
		),

		radial-gradient(
			ellipse 62% 70% at 76% 30%,
			rgba(
				55,
				125,
				235,
				0.34
			),
			transparent 69%
		),

		radial-gradient(
			ellipse 55% 52% at 64% 78%,
			rgba(
				91,
				103,
				210,
				0.18
			),
			transparent 72%
		),

		radial-gradient(
			ellipse 42% 38% at 48% 55%,
			rgba(
				255,
				255,
				255,
				0.72
			),
			transparent 70%
		);

	transform:
		translate3d(
			0,
			0,
			0
		)
		scale(
			1.03
		);

	animation:
		ssiHeroAuroraMove
		20s
		cubic-bezier(
			0.45,
			0.05,
			0.55,
			0.95
		)
		infinite alternate;

	pointer-events:
		none;
}


/* ==========================================================================
   CENTRAL BLUE ATMOSPHERE
   ========================================================================== */

.ssi-hero::after {
	content: "";

	position: absolute;

	width:
		920px;

	height:
		920px;

	top:
		49%;

	left:
		70%;

	z-index:
		-3;

	transform:
		translate(
			-50%,
			-50%
		);

	border-radius:
		50%;

	background:
		radial-gradient(
			circle,
			rgba(
				255,
				255,
				255,
				0.95
			) 0%,

			rgba(
				221,
				235,
				255,
				0.76
			) 20%,

			rgba(
				186,
				214,
				255,
				0.46
			) 40%,

			rgba(
				149,
				190,
				249,
				0.18
			) 56%,

			transparent 74%
		);

	filter:
		blur(
			18px
		);

	opacity:
		0.98;

	animation:
		ssiHeroCorePulse
		10s
		ease-in-out
		infinite alternate;

	pointer-events:
		none;
}


/* ==========================================================================
   BACKGROUND LAYER
   ========================================================================== */

.ssi-hero__background {
	position:
		absolute;

	inset:
		0;

	z-index:
		-2;

	pointer-events:
		none;

	overflow:
		hidden;
}


/* ==========================================================================
   WARM GOLD LIGHT
   ========================================================================== */

.ssi-hero__background::before {
	content: "";

	position: absolute;

	width:
		650px;

	height:
		650px;

	left:
		-230px;

	bottom:
		-300px;

	border-radius:
		50%;

	background:
		radial-gradient(
			circle,
			rgba(
				245,
				190,
				74,
				0.25
			),
			rgba(
				245,
				190,
				74,
				0.09
			) 40%,
			transparent 72%
		);

	filter:
		blur(
			25px
		);

	animation:
		ssiHeroGoldFloat
		13s
		ease-in-out
		infinite alternate;
}


/* ==========================================================================
   BLUE LIGHT
   ========================================================================== */

.ssi-hero__background::after {
	content: "";

	position: absolute;

	width:
		720px;

	height:
		720px;

	right:
		-280px;

	top:
		-300px;

	border-radius:
		50%;

	background:
		radial-gradient(
			circle,
			rgba(
				59,
				130,
				246,
				0.23
			),
			rgba(
				59,
				130,
				246,
				0.085
			) 43%,
			transparent 73%
		);

	filter:
		blur(
			28px
		);

	animation:
		ssiHeroBlueFloat
		15s
		ease-in-out
		infinite alternate;
}


/* ==========================================================================
   LIGHT SWEEP
   ========================================================================== */

.ssi-hero__grid::after {
	content: "";

	position: absolute;

	top:
		-20%;

	left:
		-35%;

	width:
		44%;

	height:
		150%;

	background:
		linear-gradient(
			100deg,
			transparent 0%,
			rgba(
				255,
				255,
				255,
				0
			) 25%,
			rgba(
				255,
				255,
				255,
				0.34
			) 48%,
			rgba(
				255,
				255,
				255,
				0
			) 74%,
			transparent 100%
		);

	filter:
		blur(
			30px
		);

	opacity:
		0.28;

	transform:
		rotate(
			10deg
		);

	animation:
		ssiHeroLightSweep
		17s
		ease-in-out
		infinite;
}


/* ==========================================================================
   ORBIT HALO
   ========================================================================== */

.ssi-hero__visual::before {
	content: "";

	position: absolute;

	width:
		650px;

	height:
		650px;

	left:
		50%;

	top:
		50%;

	transform:
		translate(
			-50%,
			-50%
		);

	border-radius:
		50%;

	background:
		radial-gradient(
			circle,
			rgba(
				59,
				130,
				246,
				0.11
			),
			rgba(
				111,
				130,
				230,
				0.04
			) 42%,
			transparent 70%
		);

	filter:
		blur(
			10px
		);

	animation:
		ssiHeroHaloBreath
		8s
		ease-in-out
		infinite alternate;

	pointer-events:
		none;

	z-index:
		-1;
}


/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes ssiHeroAuroraMove {

	0% {
		transform:
			translate3d(
				-1.5%,
				-0.5%,
				0
			)
			scale(
				1.02
			);
	}

	50% {
		transform:
			translate3d(
				1.5%,
				1.2%,
				0
			)
			scale(
				1.05
			);
	}

	100% {
		transform:
			translate3d(
				-0.5%,
				1.8%,
				0
			)
			scale(
				1.03
			);
	}
}


@keyframes ssiHeroCorePulse {

	0% {
		opacity:
			0.78;

		transform:
			translate(
				-50%,
				-50%
			)
			scale(
				0.94
			);
	}

	100% {
		opacity:
			1;

		transform:
			translate(
				-50%,
				-50%
			)
			scale(
				1.08
			);
	}
}


@keyframes ssiHeroGoldFloat {

	0% {
		transform:
			translate3d(
				0,
				0,
				0
			)
			scale(
				0.94
			);

		opacity:
			0.60;
	}

	50% {
		transform:
			translate3d(
				45px,
				-28px,
				0
			)
			scale(
				1.05
			);

		opacity:
			0.82;
	}

	100% {
		transform:
			translate3d(
				85px,
				-50px,
				0
			)
			scale(
				1.11
			);

		opacity:
			1;
	}
}


@keyframes ssiHeroBlueFloat {

	0% {
		transform:
			translate3d(
				0,
				0,
				0
			)
			scale(
				0.94
			);

		opacity:
			0.58;
	}

	50% {
		transform:
			translate3d(
				-40px,
				32px,
				0
			)
			scale(
				1.05
			);

		opacity:
			0.82;
	}

	100% {
		transform:
			translate3d(
				-78px,
				65px,
				0
			)
			scale(
				1.11
			);

		opacity:
			1;
	}
}


@keyframes ssiHeroLightSweep {

	0% {
		transform:
			translateX(
				-35%
			)
			rotate(
				10deg
			);

		opacity:
			0;
	}

	15% {
		opacity:
			0.14;
	}

	50% {
		opacity:
			0.27;
	}

	75% {
		opacity:
			0.10;
	}

	100% {
		transform:
			translateX(
				330%
			)
			rotate(
				10deg
			);

		opacity:
			0;
	}
}


@keyframes ssiHeroHaloBreath {

	0% {
		transform:
			translate(
				-50%,
				-50%
			)
			scale(
				0.92
			);

		opacity:
			0.48;
	}

	100% {
		transform:
			translate(
				-50%,
				-50%
			)
			scale(
				1.10
			);

		opacity:
			0.92;
	}
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

	.ssi-hero::after {
		width:
			720px;

		height:
			720px;

		left:
			74%;

		opacity:
			0.86;
	}

	.ssi-hero__visual::before {
		width:
			540px;

		height:
			540px;
	}
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

	.ssi-hero::before {
		inset:
			-15%;

		background:
			radial-gradient(
				ellipse 90% 48% at 12% 25%,
				rgba(
					245,
					190,
					74,
					0.15
				),
				transparent 70%
			),

			radial-gradient(
				ellipse 90% 55% at 92% 44%,
				rgba(
					59,
					130,
					246,
					0.17
				),
				transparent 72%
			),

			radial-gradient(
				ellipse 75% 48% at 52% 82%,
				rgba(
					110,
					119,
					220,
					0.09
				),
				transparent 74%
			),

			linear-gradient(
				135deg,
				#ffffff 0%,
				#f7faff 100%
			);
	}

	.ssi-hero::after {
		width:
			480px;

		height:
			480px;

		left:
			82%;

		opacity:
			0.62;

		filter:
			blur(
				24px
			);
	}

	.ssi-hero__background::before {
		width:
			390px;

		height:
			390px;

		left:
			-175px;

		bottom:
			-195px;

		opacity:
			0.78;
	}

	.ssi-hero__background::after {
		width:
			410px;

		height:
			410px;

		right:
			-195px;

		top:
			-195px;

		opacity:
			0.74;
	}

	.ssi-hero__visual::before {
		width:
			390px;

		height:
			390px;

		opacity:
			0.60;
	}
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.ssi-hero::before,
	.ssi-hero::after,
	.ssi-hero__background::before,
	.ssi-hero__background::after,
	.ssi-hero__grid::after,
	.ssi-hero__visual::before {
		animation:
			none !important;
	}
}