.watch-wrap
	
	.watch
		.watch--inner
		.watch--day.day
			.day--sun
			.day--clouds
			.day--ground
			.day--tree-one.tree
			.day--tree-two.tree
			.day--tree-three.tree
			.day--tree-four.tree
		.watch--night.night
			.night--moon
			.night--clouds

		.watch--hour
		.watch--min
		.watch--sec
		.watch--center
	.watch--numbers.numbers
		.num.numbers--12 12
		.num.numbers--3 3
		.num.numbers--6 6
		.num.numbers--9 9

html, body
	height: 100%
body
	display: flex
	justify-content: center
	align-items: center
	background: #123456


.watch
	width: 220px
	height: 220px
	background: black
	border-radius: 50%
	display: flex
	justify-content: center
	align-items: center
	position: relative
	overflow: hidden
	border: 7px solid #111
	&--hour
		width: 5px
		height: 80px
		border-radius: 10px
		transform-origin: center 65px
		transform: rotate(0deg)
		position: absolute
		background: #111
		left: calc(50% - 2.5px)
		top: calc(50% - 65px)
	&--min
		width: 5px
		height: 110px
		border-radius: 10px
		transform-origin: center 90px
		transform: rotate(0deg)
		position: absolute
		background: #333
		left: calc(50% - 2.5px)
		top: calc(50% - 90px)
	&--sec
		width: 5px
		height: 130px
		border-radius: 10px
		transform-origin: center 100px
		transform: rotate(0deg)
		position: absolute
		background: #666
		left: calc(50% - 2.5px)
		top: calc(50% - 100px)
	&--center
		position: absolute
		width: 10px
		height: 10px
		background: black
		border-radius: 50%
		left: calc(50% - 7px)
		top: calc(50% - 7px)
		border: 2px solid #ddd
		
	
// Back 
.day
	width: 220px
	height: 220px
	position: absolute
	background: #789abc
	left: 0
	top: 0
	opacity: 0
	&.active
		opacity: 1
	&--sun
		width: 60px
		height: 60px
		background: yellow
		border-radius: 50%
		position: absolute
		left: 60px
		top: 35px
	&--clouds
		position: absolute
		width: 50px
		height: 50px
		background: #ddd
		border-radius: 50%
		left: 110px
		top: 35px
		&::after
			content: ''
			width: 40px
			position: absolute
			height: 40px
			background: #ddd
			left: 30px
			top: 10px
			border-radius: 50%
		&::before
			content: ''
			width: 25px
			position: absolute
			height: 25px
			background: #ddd
			left: -10px
			top: 20px
			border-radius: 50%
	&--ground
		position: absolute
		width: 220px
		height: 70px
		background: linear-gradient( 180deg, #009900, #006600 )
		bottom: 0
	
	.tree
		position: absolute
		width: 6px
		height: 30px
	&--tree-one
		left: 60px
		bottom: 50px
		background: #663300
		&::before
			content: ''
			position: absolute
			width: 20px
			height: 50px
			background: green
			bottom: 25px
			left: -7px
			border-radius: 30px
	&--tree-two
		@extend .day--tree-one
		left: 100px
		bottom: 40px
		transform: scale(1.2)
	&--tree-three
		@extend .day--tree-one
		left: 140px
		bottom: 60px
		transform: scale(0.9)
	&--tree-four
		@extend .day--tree-one
		left: 168px
		bottom: 40px
		transform: scale(1.3)
.night
	width: 220px
	height: 220px
	position: absolute
	background: #234567
	left: 0
	top: 0
	opacity: 0
	&.active
		opacity: 1
	&--moon
		width: 60px
		height: 60px
		background: #bbb
		border-radius: 50%
		position: absolute
		left: 60px
		top: 35px
		&::before
			content: ''
			width: 50px
			border-radius: 50%
			position: absolute
			height: 50px
			background: #234567
			
	&--clouds
		position: absolute
		width: 50px
		height: 50px
		background: #fff
		border-radius: 50%
		left: 110px
		top: 35px
		&::after
			content: ''
			width: 40px
			position: absolute
			height: 40px
			background: #fff
			left: 30px
			top: 10px
			border-radius: 50%
		&::before
			content: ''
			width: 25px
			position: absolute
			height: 25px
			background: #fff
			left: -10px
			top: 20px
			border-radius: 50%
	&--ground
		position: absolute
		width: 220px
		height: 90px
		background: #114411
		bottom: 0
	
.watch-wrap
	position: relative
.numbers
	position: absolute
	left: 0
	top: 0
	right: 0
	bottom: 0
	//background: pink
	&:hover
		.numbers--12
			top: -37px
			opacity: 1
		.numbers--3
			right: -21px
			opacity: 1
		.numbers--6
			bottom: -37px
			opacity: 1
		.numbers--9
			left: -21px
			opacity: 1
	.num
		position: absolute
		text-align: center
		font-weight: bold
		font-size: 42px
		opacity: 0
		z-index: -1
	&--12
		top: 0px
		left: 50%
		transition: all 300ms ease
		transform: translateX(-50%)
		opacity: 0
	&--3
		right: 0
		bottom: 50%
		transition: all 300ms ease
		transform: translateY(50%)
		transition-delay: 100ms
		opacity: 0
	&--6
		bottom: 0
		left: 50%
		transform: translateX(-50%)
		transition: all 300ms ease
		transition-delay: 200ms
		opacity: 0
	&--9
		left: 0
		top: 50%
		transform: translateY(-50%)
		transition: all 300ms ease
		transition-delay: 300ms
		opacity: 0

$(document).ready(function(){
	var seconds = new Date().getSeconds(),
			minutes = new Date().getMinutes(),
			hours = new Date().getHours(),
			sdegree = seconds * 6,
			mdegree = minutes * 6,
			hdegree = hours * 30;
		
	$('.watch--sec').css('transform', 'rotate(' + sdegree + 'deg)');
	$('.watch--min').css('transform', 'rotate(' + mdegree + 'deg)');
	$('.watch--hour').css('transform', 'rotate(' + hdegree + 'deg)');
	
	if(hours <= 20){
		$('.night').removeClass('active');
		$('.day').addClass('active');
	}else{
		$('.day').removeClass('active');
		$('.night').addClass('active');
	}
	
	
	setInterval(function(){
	var seconds = new Date().getSeconds(),
			minutes = new Date().getMinutes(),
			hours = new Date().getHours(),
			sdegree = seconds * 6,
			mdegree = minutes * 6,
			hdegree = hours * 30;
		$('.watch--sec').css('transform', 'rotate(' + sdegree + 'deg)');
		$('.watch--min').css('transform', 'rotate(' + mdegree + 'deg)');
		$('.watch--hour').css('transform', 'rotate(' + hdegree + 'deg)');
	}, 1000)

})