@property --blink-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@keyframes blink-animation {
  0%,
  100% {
    opacity: var(--blink-opacity, 1);
  }
  50% {
    opacity: 0;
  }
}

:root {
  font-family: Inter, sans-serif;

  --stripe-color: #000;
  --bg: var(--stripe-color);
  --maincolor: var(--bg);
}

@keyframes smoothBg {
	from {
		background-position: 50% 50%, 50% 50%;
	}
	to {
		background-position: 350% 50%, 350% 50%;
	}
}

body::after{
	content: '';
    position: absolute;
	background: black;
}

.hero {
	width: 100%;
	height: 100%;
	min-height: 100vh;
	position: absolute;
	opacity: 1;
    z-index: -1;
	display: flex;
	place-content: center;
	place-items: center;
	--stripes: repeating-linear-gradient(
		100deg,
		var(--stripe-color) 0%,
		var(--stripe-color) 7%,
		transparent 10%,
		transparent 12%,
		var(--stripe-color) 16%
	);
	
	--rainbow: repeating-linear-gradient(
		100deg,
		#60a5fa 10%,
		#e879f9 15%,
		#60a5fa 20%,
		#5eead4 25%,
		#60a5fa 30%
	);
	background-image: var(--stripes), var(--rainbow);
	background-size: 300%, 200%;
	background-position: 50% 50%, 50% 50%;
	
	filter: blur(10px) invert(100%);
	
	mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: var(--stripes), var(--rainbow);
		background-size: 200%, 100%;
		animation: smoothBg var(--animation-speed, 100s) linear infinite;
		background-attachment: fixed;
		mix-blend-mode: difference;
	}
}

.hero-spinUp {
	--animation-speed: 10s;
	animation: opacityBgUp 1s ease-in-out forwards;
	
}

.hero-spinDown {
	--animation-speed: 100s;
	background-size: 300%, 200%;
	animation: opacityBgDown 2s ease-in-out;
}

@keyframes opacityBgUp {
	0% {
		opacity: 0;
		background-size: 300%, 200%;
	}
	50% {
		background-size: 500%, 1400%;
	}
	100% {
		opacity: 1;
		background-size: 300%, 200%;
	}
}

@keyframes opacityBgDown {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.hero,.hero::after {
	filter: blur(10px) opacity(50%) saturate(200%);
}

.starry-sky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/background.png') no-repeat;
    z-index: -1;
    overflow: hidden;
	background-size: cover;
    background-position: center;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle var(--twinkle-duration) ease-in-out infinite;
}

.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    transform: rotate(45deg);
    opacity: 0;
}

.shooting-star::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 100px;
    height: 1px;
    background: linear-gradient(to left, white, transparent);
    transform: translateY(-50%);
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes shoot {
    0% { 
        opacity: 0;
        transform: translateX(0) translateY(0) rotate(45deg);
    }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% {
        opacity: 0;
        transform: translateX(1000px) translateY(1000px) rotate(45deg);
    }
}