body {
	min-height:100vh;
	background:#222;
	display:grid;
	place-items:center;
}
@property --w {
	syntax:"";
	inherits:false;
	initial-value:32%;
}
@property --p1 {
	syntax:"";
	inherits:false;
	initial-value:70%;
}
@property --p2 {
	syntax:"";
	inherits:false;
	initial-value:32%;
}
@property --p3 {
	syntax:"";
	inherits:false;
	initial-value:32%;
}
@property --p4 {
	syntax:"";
	inherits:false;
	initial-value:70%;
}
.parent {
	position:relative;
	width:400px;
	height:400px;
	box-shadow:0px 0px 0px 20px #222,0px 0px 20px 40px rgba(255,255,255,.2);
	border-radius:50%;
	overflow:hidden;
}
img {
	--p1:70%;
	--p2:32%;
	--p3:32%;
	--p4:70%;
	--w:25%;
	width:400px;
	border-radius:50%;
	aspect-ratio:1;
	mask:radial-gradient(300px at var(--p1) var(--p2),black var(--w),transparent var(--w) 100%),radial-gradient(300px at var(--p3) var(--p4),black var(--w),transparent var(--w) 100%);
	-webkit-mask:radial-gradient(300px at var(--p1) var(--p2),black var(--w),transparent var(--w) 100%),radial-gradient(300px at var(--p3) var(--p4),black var(--w),transparent var(--w) 100%);
	cursor:pointer;
	transition:transform .5s ease;
}
img:not(hover) {
	animation:out .3s linear both;
}
img:hover {
	transform:scale(1.1);
	animation:move 1.5s ease both,big 1s .9s ease forwards;
}
@keyframes big {
	from {
	--w:25%;
}
to {
	--w:100%;
}
}@keyframes out {
	from {
	--w:100%;
}
to {
	--w:25%;
}
}@keyframes move {
	0%,100% {
	--p1:70%;
	--p2:32%;
	--p3:32%;
	--p4:70%;
}
35% {
	--p1:32%;
	--p2:70%;
	--p3:70%;
	--p4:32%;
}
50% {
	--p1:70%;
	--p2:60%;
	--p3:32%;
	--p4:30%;
}
100% {
	--p1:50%;
	--p2:50%;
	--p3:50%;
	--p4:50%;
}
}