:root {
	--color1: #260f27;
	--color2: #2e192d;
	--color3: #67005e;
	--color4: #8d568a;
	--color5: #bca5bb;
}

.color1 {
	color: var(--color1);
}
.color2 {
	color: var(--color2);
}
.color3 {
	color: var(--color3);
}
.color4 {
	color: var(--color4);
}
.color5 {
	color: var(--color5);
}

.bg-color1 {
	background-color: var(--color1);
}
.bg-color2 {
	background-color: var(--color2);
}
.bg-color3 {
	background-color: var(--color3);
}
.bg-color4 {
	background-color: var(--color4);
}
.bg-color5 {
	background-color: var(--color5);
}

.border-color1 {
	border-color: var(--color1);
}
.border-color3 {
	border-color: var(--color3);
}
.border-color4 {
	border-color: var(--color4);
}

.parallax-container {
	overflow: hidden;
	position: relative;
}

.parallax-layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.floating-element {
	animation: float 6s ease-in-out infinite;
}

.floating-delayed {
	animation: float 6s ease-in-out infinite;
	animation-delay: -2s;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
}

.fade-in-up {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s ease-out;
}

.fade-in-up.visible {
	opacity: 1;
	transform: translateY(0);
}

.slide-in-left {
	opacity: 0;
	transform: translateX(-50px);
	transition: all 1s ease-out;
}

.slide-in-left.visible {
	opacity: 1;
	transform: translateX(0);
}

.slide-in-right {
	opacity: 0;
	transform: translateX(50px);
	transition: all 1s ease-out;
}

.slide-in-right.visible {
	opacity: 1;
	transform: translateX(0);
}

.geometric-bg {
	background-image: radial-gradient(
			circle at 25% 25%,
			var(--color5) 2px,
			transparent 2px
		),
		radial-gradient(circle at 75% 75%, var(--color4) 2px, transparent 2px);
	background-size: 40px 40px;
}

.zen-pattern {
	background-image: linear-gradient(
			45deg,
			transparent 30%,
			var(--color5) 30%,
			var(--color5) 32%,
			transparent 32%
		),
		linear-gradient(
			-45deg,
			transparent 30%,
			var(--color4) 30%,
			var(--color4) 32%,
			transparent 32%
		);
	background-size: 60px 60px;
}

.organic-shapes::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(
			circle at 30% 70%,
			var(--color5) 0%,
			transparent 50%
		),
		radial-gradient(circle at 70% 30%, var(--color4) 0%, transparent 40%);
	opacity: 0.1;
	pointer-events: none;
}

.text-shadow {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.notification {
	transform: translateY(-100px);
	opacity: 0;
	transition: all 0.5s ease-out;
}

.notification.show {
	transform: translateY(0);
	opacity: 1;
}

.btn-hover-effect {
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.btn-hover-effect::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.2),
		transparent
	);
	transition: left 0.5s ease;
}

.btn-hover-effect:hover::before {
	left: 100%;
}

.decorative-corner {
	position: relative;
}

.decorative-corner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	border-top: 3px solid var(--color4);
	border-left: 3px solid var(--color4);
}

.decorative-corner::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100px;
	height: 100px;
	border-bottom: 3px solid var(--color4);
	border-right: 3px solid var(--color4);
}

@media (max-width: 768px) {
	.decorative-corner::before,
	.decorative-corner::after {
		width: 50px;
		height: 50px;
	}
}

.image-mask {
	clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}

.wavy-divider {
	height: 100px;
	background: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10c20 0 20-10 40-10s20 10 40 10 20-10 40-10 20 10 40 10v10H0V10z' fill='%23a5bcaf'/%3E%3C/svg%3E")
		repeat-x;
	background-size: 100px 20px;
}