codesignd Patterns

.logo__gear {
	transition: transform 2s ease-in-out 2.3s;
	
	.logo:hover &, .logo:focus & {
		transition-delay: 0.7s;
	}
}
.logo__gear--left {
	transform-origin: 261px 261px;
	
	.logo:hover &, .logo:focus & {
		transform: rotate(-90deg);
	}
}
.logo__gear--right {
	transform-origin: 1100px 340px;
	
	.logo:hover &, .logo:focus & {
		transform: rotate(90deg);
	}
}

.logo__esignd, .logo__gears {
	opacity: 1;
	transition: opacity 1s ease-in-out 1.4s;
	
	.logo:hover &, .logo:focus & {
		opacity: 0;
		transition-delay: 2.7s;
	}
}

.logo__leftd {
	transition: transform 1s ease-in-out 0.7s;
	
	.logo:hover &, .logo:focus & {
		transform: translateX(-470px);
		transition-delay: 3.4s;
	}
}

.logo__tilde {
	opacity: 0;
	transition: opacity 1s ease-in-out;
	
	.logo:hover &, .logo:focus & {
		opacity: 1;
		transition-delay: 4.3s;
	}
}