.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)