body{

background:
linear-gradient(90deg, red, yellow, blue, lime);

font-family: Comic Sans MS;

text-align:center;

animation: spin 8s linear infinite;

}

h1{

font-size:60px;
color:magenta;

}

button{

font-size:30px;
padding:20px;
cursor:crosshair;

}

input{

font-size:20px;
margin:10px;

}

@keyframes spin{

0%{transform:rotate(0deg)}
100%{transform:rotate(1deg)}

}

/* Melting effect styles */
body.melting * {
	transition: transform 0.6s ease, filter 0.6s ease;
}

@keyframes meltShift {
	0% { transform: translateY(0) skewX(0); filter: blur(0px) hue-rotate(0deg); }
	33% { transform: translateY(8px) skewX(2deg); filter: blur(0.8px) hue-rotate(10deg); }
	66% { transform: translateY(-4px) skewX(-2deg); filter: blur(0.4px) hue-rotate(-8deg); }
 100% { transform: translateY(0) skewX(0); filter: blur(0px) hue-rotate(0deg); }
}

body.melting h1,
body.melting p,
body.melting .name-row,
body.melting button,
body.melting #uselessForm,
body.melting #message {
	animation: meltShift 2.5s ease-in-out infinite;
}

/* dripping overlay pseudo effect */
body.melting::after {
	content: '';
	position: fixed;
	left: 0; top: 0; right: 0; bottom: 0;
	pointer-events: none;
	/* during the final melt we want a clean white canvas */
	background: white;
	mix-blend-mode: normal;
	animation: none;
	z-index: 9998;
}

@keyframes drip {
	0% { background-position: 0 0, 0 0; }
	100% { background-position: 0 200px, 0 80px; }
}

/* happy face */
.happy {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.01);
	font-size: 8rem;
	z-index: 9999;
	pointer-events: none;
	transition: transform 0.6s cubic-bezier(.2,.9,.3,1);
	text-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

body.melting .happy { transform: translate(-50%, -50%) scale(1); animation: happyBounce 1.8s ease-in-out infinite; }

@keyframes happyBounce {
	0% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -46%) scale(1.05); }
	100% { transform: translate(-50%, -50%) scale(1); }
}

/* reduce visual aggressiveness on small screens */
@media (max-width: 420px) {
	.happy { font-size: 5rem; }
	body.melting h1 { font-size: 40px; }
}

/* Strong melt-away: move and fade all page elements off leaving only .happy */
/* Optimized for smooth GPU rendering: only use transform and opacity */
@keyframes meltAway {
	0% { opacity: 1; transform: translateY(0) scaleY(1); }
	30% { opacity: 0.9; transform: translateY(12vh) scaleY(1.02); }
	60% { opacity: 0.5; transform: translateY(48vh) scaleY(1.08); }
	85% { opacity: 0.15; transform: translateY(90vh) scaleY(1.2); }
	100% { opacity: 0; transform: translateY(140vh) scaleY(1.3); }
}

/* apply meltAway to top-level children but keep drips, wax columns, and the happy face visible */
/* slower dissolve + melt: use a longer animation and add subtle blur/opacity for dissolving feel */
body.melting > *:not(.happy):not(script):not(.drip):not(.wax) {
	animation: meltAway 3.8s cubic-bezier(.2,.8,.2,1) forwards;
	transform-origin: top center;
	will-change: transform, opacity;
	backface-visibility: hidden;
}

/* ensure the body background becomes solid white during melt */
body.melting {
	background: white !important;
	overflow: hidden;
	perspective: 1000px;
	will-change: overflow;
}

/* force the face to remain centered above everything */
body.melting .happy {
	position: fixed !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) scale(1) !important;
	z-index: 10000 !important;
	pointer-events: none !important;
}

.happy { color: #222; }

/* dripping elements used during the melt */
.drip {
	position: fixed;
	top: -8vh;
	pointer-events: none;
	z-index: 9998;
	background: linear-gradient(180deg, rgba(255,255,255,1), rgba(245,245,245,0.9));
	border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
	transform-origin: top center;
	opacity: 0.98;
	/* custom properties: --w width, --h height, --delay, --dur, --b blur */
	width: var(--w, 80px);
	height: var(--h, 120px);
	animation: dripFall var(--dur, 1.6s) var(--delay, 0s) cubic-bezier(.22,.9,.1,1) forwards;
	will-change: transform, opacity;
	backface-visibility: hidden;
}

@keyframes dripFall {
	0% { transform: translateY(0) scaleY(0.9); opacity: 1; }
	30% { transform: translateY(18vh) scaleY(1.05); opacity: 0.95; }
	70% { transform: translateY(58vh) scaleY(1.2); opacity: 0.7; }
	100% { transform: translateY(120vh) scaleY(1.6); opacity: 0; }
}

/* smaller subtle trailing droplet */
.drip::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 70%;
	width: 40%;
	height: 40%;
	transform: translateX(-50%);
	background: rgba(255,255,255,0.92);
	border-radius: 50%;
	opacity: 0.95;
}

/* Wax columns for candle-like melting */
.wax {
	position: fixed;
	top: 0;
	pointer-events: none;
	z-index: 9997;
	background: linear-gradient(180deg, #ffffff 0%, #f7f7f2 50%, #f0efe8 100%);
	border-radius: 24px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.08);
	width: var(--w, 80px);
	height: var(--h, 120px);
	left: var(--left, 0vw);
	transform-origin: top center;
	opacity: 1;
	animation: waxFlow var(--dur, 1.9s) var(--delay, 0s) cubic-bezier(.22,.9,.1,1) forwards;
	will-change: transform, opacity;
	backface-visibility: hidden;
}

.wax::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -18%;
	width: 70%;
	height: 35%;
	transform: translateX(-50%);
	background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,245,245,0.95));
	border-radius: 50%;
	opacity: 0.98;
	animation: waxBlob var(--dur, 1.9s) var(--delay, 0s) cubic-bezier(.25,.9,.2,1) forwards;
}

@keyframes waxFlow {
	0% { transform: translateY(0) scaleY(0.6); opacity: 1; }
	40% { transform: translateY(20vh) scaleY(1.05); opacity: 0.98; }
	70% { transform: translateY(55vh) scaleY(1.25); opacity: 0.85; }
	100% { transform: translateY(120vh) scaleY(1.6); opacity: 0; }
}

@keyframes waxBlob {
	0% { transform: translateY(0) scaleY(0.5); opacity: 1; }
	60% { transform: translateY(38vh) scaleY(1.1); opacity: 0.95; }
	100% { transform: translateY(118vh) scaleY(1.4); opacity: 0; }
}

/* ensure happy face uses GPU rendering for smooth performance */
.happy {
	backface-visibility: hidden;
	will-change: transform;
}