.play-cta

	input#toggle(type='checkbox' name='toggle')

	button.play-cta__btn.plyr__controls__item.plyr__control.play-cta__btn--sunset.play-cta__btn--smooth-sunset
		svg.icon--pressed(
			role='presentation'
			focusable="false"
		)
			use(xlink:href='#pause')
		svg.icon--not-pressed(
			role='presentation'
			focusable='false'
		)
			use(xlink:href='#play')
	
	.play-cta__screens.play-cta__screens--radial-sunset.play-cta__screens--linear-sunset

	.play-cta__label
		h2.play-cta__label--play
			each val in ['P','l','a','y']
				span= val
		h2.play-cta__label--pause
			each val in ['P','a','u','s', 'e']
				span= val

// icons
svg(
	xmlns='http://www.w3.org/2000/svg'
	xmlns:xlink='http://www.w3.org/1999/xlink'
)
	symbol(
		id='play'
		viewBox='0 0 24 24'
	)
		path(d='M8,5.14V19.14L19,12.14L8,5.14Z')
	symbol(
		id='pause'
		viewBox='0 0 24 24'
	)
		path(d='M14,19H18V5H14M6,19H10V5H6V19Z')

.play-cta
	width: 16.4rem
	height: 13.6rem
	position: relative
	top: calc(50vh - (16.4rem / 2))
	left: calc(50vw - (13.6rem / 2))
	position: relative
	z-index: 1

	&:hover
		& .play-cta__btn
			box-shadow: var(--levitation), var(--accent)
			transform: scale(1.2) translateY(-1.6rem)

		& .play-cta__screens::before, & .play-cta__screens::after
			animation-play-state: running

		& .play-cta__label .play-cta__label--play span
			transform: translateY(0)
			opacity: 1
		
		& #toggle:checked:hover
			&~.play-cta__label
				& .play-cta__label--play span
					transform: translateY(-6.4rem)
					opacity: 0

				& .play-cta__label--pause span
					transform: translateY(0)
					opacity: 1

	&:active
		& .play-cta__btn
			box-shadow: var(--levitation), var(--pressed)

	#toggle
		width: 100%
		height: 100%
		position: absolute
		margin: 0
		-webkit-appearance: unset
		z-index: 2
		outline: 0
		top: 0
		left: 0
		cursor: pointer

		&:checked
			&~.play-cta__btn
				& svg.icon--pressed
					display: block

				& svg.icon--not-pressed
					display: none

			&~.play-cta__screens
				&::before, &::after
					animation-play-state: running
		
				&--linear-sunset::before
					--duration: .5s
			
				&--radial-sunset::after
					--duration: .25s
		
	.play-cta__btn
		width: 100%
		height: 100%
		background-color: var(--jb-white)
		border-radius: var(--regular-border-radius)
		border: 0
		outline: 0
		margin: 0
		padding: 0
		transition: var(--jb-transition)
		transition-delay: var(--delay)

		svg
			width: 4.8rem
			height: 4.8rem
			margin: auto
			fill: var(--jb-blueberry)
			
			&.icon--pressed
				display: none

	.play-cta__screens
		width: 100%
		height: 100%
		position: absolute
		z-index: -1
		top: 0
		left: 0
		transition: var(--jb-transition)
		pointer-events: none

		&::before, &::after
			--lower-value: .75
			--upper-value: 2
			--medium-value: 1.5

			--lower-value-radius: 2.8rem
			--upper-value-radius: .8rem
			--medium-value-radius: 1.2rem
	
			--duration: .6s
	
			@extend .play-cta__screens
			content: ''
			border-radius: var(--regular-border-radius)
	
			animation-name: bouncing
			animation-duration: var(--duration)
			animation-iteration-count: infinite
			animation-timing-function: linear
			animation-fill-mode: none
			animation-play-state: paused

		&--linear-sunset::before
			background: var(--jb-linear-sunset)
			top: 1.6rem
			left: 3.2rem
			z-index: -3
			transform-origin: 100% 100%

		&--radial-sunset::after
			background: var(--jb-radial-sunset)
			top: 4.0rem
			left: -4.0rem
			z-index: -2
			transform-origin: 0% 100%

	.play-cta__label
		width: 60rem
		height: 20rem
		position: absolute
		top: -22.8rem
		left: -28.8rem
		z-index: 1
		pointer-events: none

		.play-cta__label--play, .play-cta__label--pause
			width: 100%
			height: 100%
			position: absolute
			display: flex

		span
			transition: opacity .2s var(--ease-peps), transform var(--duration) var(--ease-peps)
			transform: translateY(6.4rem)
			opacity: 0
			display: block

			@for $i from 1 through 6
				&:nth-child(0n + #{$i})
					transition-delay: ($i * .1s) - .1s

// animation
@keyframes bouncing
	0%, 100%
		transform: scale(1)
		border-radius: var(--regular-border-radius)
	15%
		transform: scale(var(--lower-value))
		border-radius: var(--lower-value-radius)
	50%
		transform: scale(var(--upper-value))
		border-radius: var(--upper-value-radius)
	85%
		transform: scale(var(--medium-value))
		border-radius: var(--medium-value-radius)

// init
html, body
	width: 100%
	height: 100%
	margin: 0
	background-color: var(--jb-blueberry)
	font-family: var(--montserrat)
	font-size: var(--font-size)
	line-height: 1.3
	color: var(--jb-white)

	h2
		font-size: var(--large-size)
		letter-spacing: var(--large-kerning)
		font-weight: 700
		margin: 0

*, *::before, *::after
	box-sizing: border-box

// custom properties
\:root
	// typography
	--font-size: 62.5%
	--xlarge-size: 16rem
	--large-size: calc(var(--xlarge-size) - var(--plain-text))
	--medium-size: calc(var(--large-size) - var(--plain-text))
	--small-size: calc(var(--medium-size) - var(--plain-text))
	--xsmall-size: calc(var(--small-size) - var(--plain-text))
	--xxsmall-size: calc(var(--xsmall-size) - var(--plain-text))
	
	--plain-text: 1.6rem
	--small-plain-text: 1.2rem

	--large-kerning: .8rem
	--medium-kerning: .4rem

	--montserrat: 'Montserrat', Arial, Helvetica, sans-serif

	// spacing
	--xlarge-space: 6.4rem
	--large-space: 3.2rem
	--regular-space: 1.6rem
	--small-space: .8rem
	--xsmall-space: .4rem

	// colors
	--jb-white-rgb: 255, 255, 255
	--jb-white: rgba(var(--jb-white-rgb), 1)
	--jb-white-9: rgba(var(--jb-white-rgb), .9)
	--jb-white-8: rgba(var(--jb-white-rgb), .8)
	--jb-white-7: rgba(var(--jb-white-rgb), .7)
	--jb-white-6: rgba(var(--jb-white-rgb), .6)
	--jb-white-5: rgba(var(--jb-white-rgb), .5)
	--jb-white-4: rgba(var(--jb-white-rgb), .4)
	--jb-white-3: rgba(var(--jb-white-rgb), .3)
	--jb-white-2: rgba(var(--jb-white-rgb), .2)
	--jb-white-1: rgba(var(--jb-white-rgb), .1)

	--jb-blueberry-rgb: 25, 0, 56
	--jb-blueberry: rgba(var(--jb-blueberry-rgb), 1)
	--jb-blueberry-9: rgba(var(--jb-blueberry-rgb), .9)
	--jb-blueberry-8: rgba(var(--jb-blueberry-rgb), .8)
	--jb-blueberry-7: rgba(var(--jb-blueberry-rgb), .7)
	--jb-blueberry-6: rgba(var(--jb-blueberry-rgb), .6)
	--jb-blueberry-5: rgba(var(--jb-blueberry-rgb), .5)
	--jb-blueberry-4: rgba(var(--jb-blueberry-rgb), .4)
	--jb-blueberry-3: rgba(var(--jb-blueberry-rgb), .3)
	--jb-blueberry-2: rgba(var(--jb-blueberry-rgb), .2)
	--jb-blueberry-1: rgba(var(--jb-blueberry-rgb), .1)
	--jb-blueberry-05: rgba(var(--jb-blueberry-rgb), .05)

	--jb-salmon: rgb(255, 178, 170)
	--jb-desert: rgb(255, 241, 118)
	--jb-milka: rgb(187, 176, 255)

	// gradients
	--jb-salmon-milka-linear: linear-gradient(30deg, var(--jb-salmon) 0%, var(--jb-milka) 100%)
	--jb-linear-shine: linear-gradient(30deg, transparent 25%, var(--jb-desert) 50%, transparent 75%)
	--jb-linear-sunset: var(--jb-linear-shine), var(--jb-salmon-milka-linear)

	--jb-salmon-milka-radial: radial-gradient(circle, var(--jb-salmon) 0%, var(--jb-milka) 100%)
	--jb-radial-shine: radial-gradient(circle, transparent 0%, var(--jb-desert) 50%, transparent 100%)
	--jb-radial-sunset: var(--jb-radial-shine), var(--jb-salmon-milka-radial)

	--radial-mask: radial-gradient(circle, var(--jb-white-1) 0%, transparent 40%, var(--jb-blueberry) 100%)

	// box shadow
	--shadow-color: var(--jb-blueberry-1)
	--shadow-spread: .4rem

	--levitation: 0 .8rem .8rem var(--shadow-color)
	--accent: inset 0 0 0 var(--shadow-spread) var(--shadow-color)
	--pressed: inset 0 0 0 var(--shadow-spread) var(--jb-blueberry-4)
	--focus: 0 0 0 var(--shadow-spread) var(--jb-milka)

	// radius
	--regular-border-radius: 1.6rem
	--small-border-radius: .8rem

	// easing
	--ease-peps: cubic-bezier(.03,.85,.36,1)

	// transition/animation
	--duration: .4s
	--delay: 0s
	--functions: all

	--jb-transition: var(--functions) var(--duration) var(--ease-peps) var(--delay)