@import "compass/css3";

// FUNCTIONS
@function randomNum($min, $max) {
	$rand: random();
	$randomNum: $min + floor($rand * (($max - $min) + 1));
	@return $randomNum;
}

// VAR
$frame-width: 350px;
$background-color-0: #1e3242;
$background-color-1: #0a2342;
$background-color-2: #283e51;

$shooting-star-tail-length: 180px;

$heart-width: 56px;
$heart-color-0: white;
$heart-color-1: #f6edd1;
$heart-color-2: #e8c8a1;
$heart-color-3: hotpink;
$move-options: 12s ease-in-out infinite;
$move-distance: $heart-width * 1.5;
$bounce-options: 1.5s ease-in-out infinite;
$bounce-distance: $heart-width * 0.25;

$wing-width: $heart-width * 1.25;
$wing-color-0: white;
$wing-color-1: #3d966e;
$rotation-options: $move-options;
$rotation-angle: 45deg;
$rotation-base-angle: 35deg;
$rotation-translateX: $heart-width * 0.25;
$rotation-perspective: $heart-width * 5;
$flapping-options: 0.55s ease-in-out infinite;

$spark-width: $heart-width * 0.22;
$sparkling-time: 2s;
$sparkling-options: linear infinite;
$sparkling-distance: $heart-width * 2.35;

.frame {

	.star {
		position: absolute;
		width: 1px;
		height: 1px;
		border-radius: 1px;
		background: #fff;
		@for $i from 1 through 250 {
			&:nth-child(#{$i}) {
				left: random(99) * 1%;
				$randomTopValue: random(100);
				bottom: $randomTopValue * 1% - 1%;
				opacity: ($randomTopValue - random(50)) / 100;
				animation: randomNum(2000, 4000) + ms flickr (randomNum(0, -2000)) + ms infinite;
			}
		}
	}

	.shooting-star-container {
		position: absolute;
		left: 50%;
		top: 45%;
		transform: rotate(-110deg);

		.shooting-star {
			position: absolute;
			width: 1px;
			height: 1px;
			background: white;
			opacity: 0.9;
			box-shadow: 0 0 4px 2px white, 0 0 6px 4px red;
			animation: shooting-star-move linear infinite;
			@for $i from 1 through 3 {
				&:nth-child(#{$i}) {
					left: randomNum(-80, 80) + px;
					animation-delay: randomNum(-4000, 4000) + ms;
					animation-duration: randomNum(2000, 4000) + ms;
				}
			}
			.shooting-star-tail {
				position: absolute;
				width: 1px;
				height: 1px;
				background: white;
				@for $i from 1 through 40 {
					$delay: randomNum(-2000, 0) + ms;
					&:nth-child(#{$i}) {
						left: randomNum(-3, 3) + px;
						animation: 2s tail-move $delay ease-in infinite;
					}
				}
			}
		}
	}
}

// FAIRY
.fairy-container {
	position: absolute;
	top: 50%;
	left: 50%;
	animation: move $move-options;

	// HEART
	.heart-container {
		position: absolute;
		border-radius: 50%;
		width: $heart-width;
		height: $heart-width;
		left: calc(50% - #{$heart-width/2});
		top: calc(50% - #{$heart-width/2});
		border: solid 1px $heart-color-1;
		background: radial-gradient(circle, $heart-color-0 35%, $heart-color-1 100%);
		box-shadow: 0 0 $heart-width * 0.2 $heart-width * 0.1 $heart-color-2,
			0 0 $heart-width * 0.6 $heart-width * 0.3 $heart-color-3;
		animation: bounce $bounce-options;
	}

	// WINGS
	.wing-container {
		animation: bounce $bounce-options;
		.wing {
			position: absolute;
			opacity: 0.65;
		}
		.wing-container-top {
			.wing {
				border-radius: 40%;
				bottom: 50%;
				width: $wing-width;
				height: $wing-width * 1.35;
				background: radial-gradient(
					ellipse at bottom,
					$wing-color-0 25%,
					$wing-color-1 100%
				);
			}
		}
		.wing-container-bottom {
			.wing {
				border-radius: 45%;
				top: 50%;
				width: $wing-width * 0.9;
				height: $wing-width;
				background: radial-gradient(
					ellipse at top,
					$wing-color-0 25%,
					$wing-color-1 100%
				);
			}
		}
		.wing-container-left {
			.wing-container-top .wing {
				transform: skew(20deg, 30deg);
			}
			.wing-container-bottom .wing {
				transform: skew(-25deg, -10deg);
			}
		}
		.wing-container-right {
			.wing-container-top .wing {
				transform: skew(-20deg, -30deg);
			}
			.wing-container-bottom .wing {
				transform: skew(25deg, 10deg);
			}
		}

		.wing-container-left {
			animation: rotation-wings-left $rotation-options;
			.wing {
				right: calc(50% + #{$heart-width * 0.2});
				transform-origin: right;
			}
		}
		.wing-container-right {
			animation: rotation-wings-right $rotation-options;
			.wing {
				left: calc(50% + #{$heart-width * 0.2});
				transform-origin: left;
			}
		}

		.wing-container-left .wing-container-top,
		.wing-container-left .wing-container-bottom,
		.wing-container-right .wing-container-top,
		.wing-container-right .wing-container-bottom {
			animation: flapping $flapping-options;
		}
	}

	// SPARKS
	.spark-container .spark {
		position: absolute;
		border-radius: 50%;
		left: calc(50% - #{$spark-width/2});
		top: calc(50% - #{$spark-width * 1});

		@for $i from 1 through 20 {
			&:nth-child(#{$i}) {
				animation: sparkling-#{$i} $sparkling-time $sparkling-options;
				animation-delay: -#{$i * $sparkling-time / 20};
			}
		}
	}
}

// ANIMATIONS
@keyframes flickr {
	0%,
	100% {
		background: rgba(255, 255, 255, 1);
	}
	50% {
		background: rgba(255, 255, 255, 0.15);
	}
}

@keyframes shooting-star-move {
	0% {
		transform: translateY($frame-width * 0.6);
	}
	100% {
		transform: translateY(-$frame-width);
	}
}
@keyframes tail-move {
	0% {
		opacity: 0;
		box-shadow: none;
	}
	25% {
		opacity: 0.8;
		box-shadow: 0 0 2px 1px white, 0 0 3px 2px red;
	}
	100% {
		opacity: 0;
		box-shadow: none;
		height: 0;
		width: 0;
		transform: translateY($shooting-star-tail-length);
	}
}

@keyframes move {
	0%,
	100% {
		transform: translate($move-distance, $move-distance);
	}
	50% {
		transform: translate(-$move-distance, -$move-distance);
	}
}
@keyframes bounce {
	0%,
	100% {
		transform: translateY($bounce-distance);
	}
	50% {
		transform: translateY(-$bounce-distance);
	}
}

@keyframes rotation-wings-left {
	0%,
	100% {
		transform: perspective($rotation-perspective)
			translateX(-$rotation-translateX) rotateX(0)
			rotateY(-$rotation-base-angle + $rotation-angle);
	}
	50% {
		transform: perspective($rotation-perspective) translateX(0) rotateX(0)
			rotateY(-$rotation-base-angle - $rotation-angle);
	}
}
@keyframes rotation-wings-right {
	0%,
	100% {
		transform: perspective($rotation-perspective) translateX(0) rotateX(0)
			rotateY($rotation-base-angle + $rotation-angle);
	}
	50% {
		transform: perspective($rotation-perspective) translateX($rotation-translateX)
			rotateX(0) rotateY($rotation-base-angle - $rotation-angle);
	}
}
@keyframes flapping {
	0%,
	100% {
		transform: rotateX(-5deg) rotateY(-35deg);
	}
	50% {
		transform: rotateX(5deg) rotateY(35deg);
	}
}

@for $i from 1 through 20 {
	@keyframes sparkling-#{$i} {
		$spark-width-random: $spark-width * randomNum(0.9, 1.1);
		0% {
			opacity: 0;
			width: $spark-width-random;
			height: $spark-width-random;
			background: $heart-color-1;
		}
		50% {
			opacity: 0.92;
		}
		100% {
			opacity: 0;
			width: 0;
			height: 0;
			background: $heart-color-3;
			transform: translate(
				randomNum(-$sparkling-distance, $sparkling-distance),
				randomNum(-$sparkling-distance, $sparkling-distance)
			);
		}
	}
}



// BACKGROUND
body {
	background: $background-color-0;
}
.frame {
	position: absolute;
	width: $frame-width;
	height: $frame-width;
	left: calc(50% - #{$frame-width*0.25});
	top: calc(50% - #{$frame-width*0.5});
	border-radius: 2px;
	box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
	overflow: hidden;
	background: linear-gradient(
		to bottom,
		$background-color-1 0%,
		$background-color-2 100%
	);
}
// DESCRIPTION (delete me if needed)
.description-container {
	position: absolute;
	top: calc(50% - #{$frame-width * 0.5});
	right: calc(50% + #{$frame-width * 0.25});
	width: 50%;
	text-align: right;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-top: 16px;
	margin-right: 16px;
	.title {
		font-size: 34px;
		font-weight: 400;
		color: white;
	}
	.subtitle {
		margin-top: 6px;
		font-size: 18px;
		font-weight: 400;
		color: $heart-color-3;
	}
}

.author-container {
	$width: 42px;
	position: absolute;
	width: 50%;
	right: $width/2;
	bottom: $width/2;
	text-align: right;
	.picture {
		position: absolute;
		right: 0;
		top: -$width;
		margin-top: -12px;
		width: $width;
		height: $width;
		background-size: $width;
		background-position: center;
		background-repeat-style: "no-repeat";
		background-image: url(https://assets.codepen.io/595576/internal/avatars/users/default.png?format=auto&version=1689877807&width=80&height=80);
	}
	.title {
		font-size: 16px;
		letter-spacing: 2px;
		color: white;
	}
}