@charset "utf-8";

:root {
	--pk0: #fff8fa; --pk1: #ffe3ef; --pk2: #ffb8d4; --pk3: #ff85b3; --pk4: #f5508a; --pk5: #c42b5e;
	--gold: #f9c84a; --gold2: #ffeaa0;
	--rainbow1: #ff85b3; --rainbow2: #ffb347; --rainbow3: #ffe066; --rainbow4: #a8e6a3; --rainbow5: #7ec8e3; --rainbow6: #c3a8e8;
	--white: #ffffff; --cream: #fffbfc;
	--dark: #efebec;
	--text: #3a1828; --text2: #8a4060; --text3: #c48aaa;
	--shadow: 0 10px 40px rgba(245,80,138,.14);
	--shadow-sm: 0 4px 16px rgba(245,80,138,.10);
	--glow: 0 0 24px rgba(249,200,74,.45);
	--radius: 22px;
	--radius-sm:14px;
	--fn: 'Nunito','Zen Maru Gothic',sans-serif;
	--fn-jp: 'Zen Maru Gothic',sans-serif;
	--fn-logo: 'Pacifico',cursive;
}
*,*::before,*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: var(--fn);
	background: var(--cream);
	color: var(--text);
	overflow-x: hidden;
	cursor: none;

	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
}

/* Cursor */
#cur {
	pointer-events: none;
	position: fixed;
	z-index: 9999;
	width: 20px;
	height: 20px;
	transform: translate(-50%,-50%);
	font-size: 16px;
	line-height: 1;
}
#ring {
	pointer-events: none;
	position: fixed;
	z-index: 9998;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid var(--pk3);
	transform: translate(-50%,-50%);
	opacity: .4;
	transition: left .07s,top .07s;
}

/* BG */
.bg-layer {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.bg-layer::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--pk2) 1px,transparent 1px);
	background-size: 28px 28px;
	opacity: .18;
}
.blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(72px);
	animation: blobDrift 16s ease-in-out infinite alternate;
}
.bl1 {
	width: 500px;
	height: 500px;
	background: var(--pk1);
	top: -120px;
	left: -100px;
	opacity: .55;
}
.bl2 {
	width: 360px;
	height: 360px;
	background: var(--gold2);
	top: 35%;
	right: -80px;
	opacity: .35;
	anima: tion-delay:-7s;
}
.bl3 {
	width: 280px;
	height: 280px;
	background: var(--pk2);
	bottom: -80px;
	left: 25%;
	opacity: .40;
	animation-delay: -12s;
}
@keyframes blobDrift {
	from {
		transform: translate(0,0)scale(1)
	}
	to {
		transform:translate(28px,18px)scale(1.06)
	}
}

/* Feathers */
.feathers {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}
.feath {
	position: absolute;
	top: -30px;
	opacity: 0;
	animation: feathFall linear infinite;
}
@keyframes feathFall {
	0% {
		opacity: 0;
		transform: translateX(0)rotate(0deg)scale(.9);
	}
	8% {
		opacity: .7;
	}
	88% {
		opacity: .5;
	}
	100% {
		opacity: 0;
		transform: translateX(40px)rotate(300deg)translateY(108vh)scale(1.05);
	}
}