<div class="cards">
	<div class="card" id="card">
		<div class="card__brand">
			<img src="https://s3.amazonaws.com/BURC_Pages/downloads/a-smile_color.png" alt="Amazon logo" class="card__logo">
			<h1>Amazon</h1>
		</div>
		<div class="card__content">
			<ol class="event__timeline">
				<li class="event__group">
					<strong class="event__group-date">
						9<span>Aug</span>
					</strong>
					<ol>
						<li class="event">
							<strong class="event__time">10:30 am</strong>
							<p>Ready for delivery</p>
						</li>
						<li class="event">
							<strong class="event__time">5:58 pm</strong>
							<p>Package photo</p>
							<span class="event__img">
								<img src="http://unsplash.it/250/150?image=433" alt="Photo">
							</span>
						</li>
					</ol>
				</li>
				<li class="event__group">
					<strong class="event__group-date">
						5<span>Aug</span>
					</strong>
					<ol>
						<li class="event">
							<strong class="event__time">10:30 am</strong>
							<p>Shipped to hub</p>
						</li>
					</ol>
				</li>
			</ol>
		</div>
		<p class="card__status">Ready for delivery</p>
		<span class="card__background"></span>
	</div>
</div>

$c-black: #354152;
$c-white: #FFFFFF;
$c-body-bg: #E1E6ED;
$c-grey: #555E6B;
$c-grey-light: #ccc;
$c-accent: #11CFD9;

$w-normal: 400;
$w-semibold: 600;
$w-bold: 700;

$p-x-small: 1rem;
$p-small: 1.1rem;
$p-base: 1.6rem;
$p-large: 2rem;
$p-x-large: 2.4rem;

$r-normal: .5rem;
$r-small: .3rem;

html {
	font-size: 10px;
	-webkit-font-smoothing: antialiased;
}

body {
	background: $c-body-bg;
	font-family: 'Open Sans', sans-serif;
}

.cards {
	position: absolute;
	right: 50%; bottom: 50%;
	text-align: center;
	font-size: 0;
	transform: translate(50%, 50%);
}

.card {
	display: inline-block;
	position: relative;
	width: 16rem;
	height: 18rem;
	margin: 1rem;
	font-size: $p-base;
	color: $c-grey;
	cursor: pointer;
	
	&__brand {
		position: absolute;
		top: 0; left: 0;
		z-index: 3;
		width: 16rem;
		height: 13rem;
		font-weight: $w-semibold;
		font-size: $p-large;
	}
	
	&__logo {
		display: inline-block;
		left: 25%;
		width: 40%;
		margin: 12% 0 5%;
	}
	
	&__status {
		position: absolute;
		right: 0; bottom: 1.5rem; left: 0;
		z-index: 1;
		font-size: $p-small;
		font-weight: $w-semibold;
		text-transform: uppercase;
		line-height: 1em;
		
		&::before {
			content: '';
			display: inline-block;
			position: relative;
			top: -.1rem;
			width: .6rem;
			height: .6rem;
			margin-right: .4rem;
			border-radius: 50%;
			background: $c-accent;
			vertical-align: middle;
		}
	}
	
	&__content {
		visibility: hidden;
		position: absolute;
		right: 50%; bottom: 50%;
		z-index: 2;
		width: 140%;
		padding: 13rem 2rem 2rem;
		transform: translate(50%, 50%);
	}
	
	&__background {
		position: absolute;
		right: 50%; bottom: 50%;
		z-index: 0;
		width: 100%;
		height: 100%;
		border-radius: $r-normal;
		box-shadow: 0 .1rem .2rem rgba($c-black, .1);
		background: white;
		transform: translate(50%, 50%);
	}
}

.event {
	position: relative;
	padding-left: 20%;
	padding-bottom: 1.5rem;
	
	.event__group:last-child &:last-child {
		padding-bottom: 0;
			
		&::before { display: none; }
	}
	
	.event__group:first-child &:first-child::after {
		background: $c-accent;
	}

	&::before,
	&::after {
		content: '';
		position: absolute;
	}

	&::before {
		top: 1.5rem; left: 5%;
		width: 1px;
		height: 100%;
		background: $c-grey-light;
	}

	&::after {
		top: 1.5rem; left: 5%;
		width: 7px;
		height: 7px;
		margin: -3px 0 0 -3px;
		border-radius: 50%;
		box-shadow: 0 0 0 .3rem $c-white;
		background: $c-grey-light;
	}
	
	&__timeline {
		padding: 2rem 0 1.5rem;
	}
	
	&__group {
		position: relative;
		padding-left: 18%;
		
		ol {
			text-align: left;
		}
	}
	
	&__group-date {
		position: absolute;
		top: -.4rem; left: -2%;
		width: 18%;
		font-size: $p-x-large;
		color: $c-black;
		
		span {
			display: block;
			font-size: $p-small;
			text-transform: uppercase;
			color: $c-grey;
		}
	}
	
	&__img {
		display: block;
		position: relative;
		padding-top: 59.5%;
		width: 80%;
		margin-top: .8rem;
		
		img {
			position: absolute;
			top: 0; left: 0;
			width: 100%;
			border-radius: $r-small;
		}
	}
	
	&__time {
		display: block;
		margin-bottom: .2rem;
		font-size: $p-x-small;
		opacity: .8;
	}
}

var $c = $('#card'),
	open = false;

$c = {
	root: $c,
	bg: $c.find('.card__background'),
	status: $c.find('.card__status'),
	brand: $c.find('.card__brand'),
	content: $c.find('.card__content'),
	timeline: $c.find('.event__timeline')
};

var toggleCard = function(){
	
	open = !open;
	
	var rW = $c.root.innerWidth(),
		rH = $c.root.innerHeight(),
		cW = $c.content.innerWidth(),
		cH = $c.content.innerHeight();

	TweenMax
		.to($c.bg, .6, {
			width: open ? cW : rW,
			height: open ? cH : rH,
			ease: Elastic.easeOut.config(1, .5)
		});
 
	TweenMax
		.to($c.brand, .6, {
			y: open ? 0 - ( ( cH - rH ) / 2 ) : 0,
			force3D: true,
			ease: Elastic.easeOut.config(1, .5)
		});
	
	TweenMax
		.to($c.status, open ? .07 : .3, {
			autoAlpha: open ? 0 : 1,
			force3D: true, 
			delay: open ? 0 : .25,
			ease: Expo.easeOut
		});

	if( open ){
		
		TweenMax
			.fromTo($c.content, .6, {
				scale: .6
			},{
				scale: 1,
				force3D: true,
				ease: Elastic.easeOut.config(1, .5)
			});
	
	}

	TweenMax
		.fromTo($c.content, open ? .4 : .1, {
			autoAlpha: 1 
		},{
			autoAlpha: open ? 1 : 0,
			ease: Cubic.easeOut
		});

	var $events = $c.timeline.find('li li');
	 
	if( open ){
		
		TweenMax
			.staggerFromTo($events, .5, {
				y: -40
			},{
				y: 0, 
				delay: .15,
				force3D: true,
				ease: Elastic.easeOut.config(1, .5)
			}, .05);

		TweenMax
			.staggerFromTo($events, .45, {
				opacity: 0
			},{
				opacity: 1,
				delay: .15,
				ease: Cubic.easeOut
			}, .05);

		var $dates = $c.timeline.find('.event__group-date');

		TweenMax
			.staggerFromTo($dates, .5, {
				y: -40
			},{
				y: 0,
				delay: .15,
				force3D: true,
				ease: Elastic.easeOut.config(1, .5)
			}, .05);

		TweenMax
			.staggerFromTo($dates, .45, {
				opacity: 0
			},{
				delay: .15,
				opacity: 1,
				ease: Cubic.easeOut
			}, .05);
	
	}
	
};

$c.root.on('click', toggleCard);