<svg style="display: none;">
	<symbol id="dribbble-logo" viewBox="0 0 32 32">
		<circle fill="#EA4C89" cx="16" cy="16" r="16"/><path fill="#C02261" d="M16 .002c-8.838 0-16 7.164-16 16s7.162 16 16 16 16-7.164 16-16-7.164-16-16-16zm10.498 7.744c1.72 2.184 2.773 4.912 2.855 7.88-3.59-.628-6.686-.647-9.36-.223-.34-.778-.688-1.534-1.046-2.266 2.87-1.18 5.442-2.9 7.55-5.39zm-1.84-1.912c-1.885 2.287-4.25 3.86-6.926 4.932-1.713-3.174-3.476-5.82-4.883-7.75 1.01-.247 2.062-.38 3.147-.38 3.303 0 6.325 1.207 8.66 3.198zM10.253 3.937c1.36 1.817 3.172 4.45 4.943 7.676-3.754 1.03-7.953 1.31-12.203 1.32.938-3.975 3.652-7.27 7.26-8.996zM2.633 16l.013-.43h.072c4.762 0 9.49-.313 13.73-1.562.315.643.626 1.303.93 1.982-5.577 1.635-9.054 5.305-11.437 8.797-2.054-2.35-3.304-5.424-3.304-8.786h-.002zM7.89 26.614c2.255-3.398 5.4-6.76 10.514-8.173 1.195 3.064 2.17 6.407 2.687 9.917-1.568.65-3.287 1.012-5.09 1.012-3.05 0-5.86-1.028-8.11-2.756zm15.66.41c-.548-3.208-1.444-6.267-2.522-9.103 2.338-.295 5.025-.223 8.142.35-.624 3.622-2.706 6.75-5.62 8.755v-.002z"/>
	</symbol>
</svg>

<div class="dribbble-card">
	<div class="logo">
		<svg role="img" aria-labeledby="icon-logo">
			<title id="icon-logo">Dribbble Logo</title>
			<use xlink:href="#dribbble-logo"></use>
		</svg>
		<span class="badge" aria-label="Notification badge">2</span>
	</div>
	<h3><span>x2</span> Dribbble Invite</h3>
	<a href="#0">Get</a>
</div>

$brandPrimary: #ed548f;
$brandSecondary: #50bde0;

html, body { height: 100vh; }

body {
	background: linear-gradient(45deg, darken($brandPrimary,20%) 0%, $brandPrimary 100%);
	margin: 50px;
	height: 100%;
	perspective: 2000px;
	overflow: hidden;
}

.dribbble-card {
	
	background: #fff;
	border-radius: 15px;
	padding: 130px 30px 100px;
	max-width: 300px;
	text-align: center;
	margin: 0 auto;
	transform: rotateX(32deg) rotateZ(-32deg) scale(0);
	animation: rise 1s .3s forwards;
	opacity: 0;
	will-change: transform, opacity;
	
	.logo {
		width: 150px;
		height: 150px;
		margin: 0 auto;
		border-radius: 100%;
		box-shadow: 0 0 30px darken($brandPrimary,20%);
		position: relative;
		svg {
			width: 150px;
			height: 150px;
			animation: rotate 1s forwards;
			will-change: transform;
		}
	}
	
	.badge {
		background: $brandSecondary;
		width: 40px;
		height: 40px;
		border-radius: 100%;
		color: #fff;
		display: block;
		font-size: 25px;
		line-height: 40px;
		font-weight: bold;
		position: absolute;
		top: 0;
		right: 0;
		opacity: 0;
		animation: appear .3s 1.2s forwards;
		will-change: transform, opacity;
	}
	
	h3 {
		font-size: 25px;
		color: $brandPrimary;
		margin-bottom: 100px;
	}
	
	h3 span {
		color: $brandSecondary;
	}
	
	a {
		background: $brandPrimary;
		display: inline-block;
		color: #fff;
		padding: 8px 50px;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 20px;
		border-radius: 30px;
		font-weight: bold;
	}
	
}

@keyframes rise {
	0% {
		transform: rotateX(0) rotateZ(-0) scale(1);
	}
	50% {
		transform: rotateX(32deg) rotateZ(-32deg) scale(1.5);
	}
	100% {
		opacity: 1;
		box-shadow: -30px 30px 54px 0 rgba(0, 0, 0, 0.5);
		transform: rotateX(32deg) rotateZ(-32deg) scale(1.3);
	}
}

@keyframes appear {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(3);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes rotate {
	100% { transform: rotate(360deg); }
}

// inspiration: https://dribbble.com/shots/2827016-2-Dribbble-Invite