mixin track(className, twoPlayer)
  svg.track__piece(class=className xmlns="http://www.w3.org/2000/svg" viewBox="0 0 294.44 122.55")
    path(d="M61.27.5c45.13.16 68.384 25.592 96.354 57.072 27.98 31.47 41.564 54.925 75.536 54.478 33.972-.447 50.78-22.13 50.78-50.78 0-28.65-14.587-51.595-50.78-50.77-36.193.825-60.4 17.052-88.2 47.072-27.8 30.01-40.15 64.308-83.68 64.478C17.74 122.21.5 89.93.5 61.28.5 32.63 16.14.34 61.27.5z" fill="none")
    if twoPlayer
      path(d="M61.27 10.5c35.51-.132 57.97 19.3 85.94 50.78 27.98 31.47 41.78 60.92 85.95 60.77 44.18-.16 60.78-32.13 60.78-60.78S275.48.55 233.16.5C190.85.45 179.091 35.76 151.291 65.78c-27.8 30.01-56.388 46.395-90.011 46.269-33.623-.127-50.78-22.12-50.78-50.77 0-28.65 15.26-50.649 50.77-50.78z" fill="none")

mixin cuboid(className)
  .cuboid(class=className)
    - let s = 0
    while s < 6
      .cuboid__side
      - s++

.race
  .track
    +track('dirt', true)
    +track('burm', true)
    svg.track__piece.burm__dashes(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 294.44 122.55")
      path(d="M61.27.5c45.13.16 68.384 25.592 96.354 57.072 27.98 31.47 41.564 54.925 75.536 54.478 33.972-.447 50.78-22.13 50.78-50.78 0-28.65-14.587-51.595-50.78-50.77-36.193.825-60.4 17.052-88.2 47.072-27.8 30.01-40.15 64.308-83.68 64.478C17.74 122.21.5 89.93.5 61.28.5 32.63 16.14.34 61.27.5z" fill="none")
      path(d="M61.27 10.5c35.51-.132 57.97 19.3 85.94 50.78 27.98 31.47 41.78 60.92 85.95 60.77 44.18-.16 60.78-32.13 60.78-60.78S275.48.55 233.16.5C190.85.45 179.091 35.76 151.291 65.78c-27.8 30.01-56.388 46.395-90.011 46.269-33.623-.127-50.78-22.12-50.78-50.77 0-28.65 15.26-50.649 50.77-50.78z" fill="none")
    +track('road', true)
    +track('markings', true)
    .start
    .bridge
      +cuboid('bridge__top bridge__top--center')
      +cuboid('bridge__top bridge__top--left bridge__top--fence')
      +cuboid('bridge__top bridge__top--right bridge__top--fence')
      +cuboid('bridge__pillar bridge__pillar--one')
      +cuboid('bridge__pillar bridge__pillar--two')
      +cuboid('bridge__ramp bridge__ramp--one')
      +cuboid('bridge__ramp bridge__ramp--two')
      +cuboid('bridge__rail bridge__rail--one')
      +cuboid('bridge__rail bridge__rail--two')
      +cuboid('bridge__rail bridge__rail--three')
      +cuboid('bridge__rail bridge__rail--four')
    .car.car--one
      .car__plane
        +cuboid('car__wheels car__wheels--front')
        +cuboid('car__wheels car__wheels--rear')
        +cuboid('car__body')
        +cuboid('car__cab')
        +cuboid('car__spoiler')
    .car.car--two
      .car__plane
        +cuboid('car__wheels car__wheels--front')
        +cuboid('car__wheels car__wheels--rear')
        +cuboid('car__body')
        +cuboid('car__cab')
        +cuboid('car__spoiler')

*
  box-sizing border-box
  transform-style preserve-3d

:root
  --player-one "M61.27.5c45.13.16 68.384 25.592 96.354 57.072 27.98 31.47 41.564 54.925 75.536 54.478 33.972-.447 50.78-22.13 50.78-50.78 0-28.65-14.587-51.595-50.78-50.77-36.193.825-60.4 17.052-88.2 47.072-27.8 30.01-40.15 64.308-83.68 64.478C17.74 122.21.5 89.93.5 61.28.5 32.63 16.14.34 61.27.5z"
  --player-two "M61.27 10.5c35.51-.132 57.97 19.3 85.94 50.78 27.98 31.47 41.78 60.92 85.95 60.77 44.18-.16 60.78-32.13 60.78-60.78S275.48.55 233.16.5C190.85.45 179.091 35.76 151.291 65.78c-27.8 30.01-56.388 46.395-90.011 46.269-33.623-.127-50.78-22.12-50.78-50.77 0-28.65 15.26-50.649 50.77-50.78z"
  --bridge-height 16
  --scale 1
  --angle -56
  --bank 180
  // Colors
  --guide hsl(220, 20%, 10%)
  --track hsl(220, 10%, 40%)
  --track--two hsl(220, 10%, 50%)
  --track--three hsl(220, 10%, 60%)
  --burm hsl(0, 0%, 90%)
  --burm-dash hsl(0, 50%, 50%)
  --bg hsl(220, 30%, 14%)
  --dirt hsl(45, 40%, 60%)
  --bridge--one hsl(0, 0%, 40%)
  --bridge--two hsl(0, 0%, 50%)
  --bridge--three hsl(0, 0%, 75%)
  --tail hsl(0, 80%, 50%)
  --head hsl(40, 80%, 80%)
  --tyre hsl(0, 0%, 5%)
  --rim hsl(0, 0%, 75%)
  --decal hsl(0, 0%, 100%)
  --glass hsl(220, 50%, 80%)
  --bumper hsl(0, 0%, 50%)
  --check hsla(0, 0%, 5%, 0.5)
  --off-check transparent

.cuboid {
  // Defaults
  --width: 15;
  --height: 10;
  --depth: 4;
  height: calc(var(--depth) * 1px);
  width: calc(var(--width) * 1px);
  transform-style: preserve-3d;
  position: absolute;
  font-size: 1rem;
  transform: translate3d(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px), calc(var(--z, 0) * 1px)) rotate(calc(var(--r, 0) * 1deg));
}
.cuboid > div:nth-of-type(1) {
  height: calc(var(--height) * 1px);
  width: 100%;
  transform-origin: 50% 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1px));
}
.cuboid > div:nth-of-type(2) {
  height: calc(var(--height) * 1px);
  width: 100%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1px));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(3) {
  height: calc(var(--height) * 1px);
  width: calc(var(--depth) * 1px);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1px));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(4) {
  height: calc(var(--height) * 1px);
  width: calc(var(--depth) * 1px);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1px));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(5) {
  height: calc(var(--depth) * 1px);
  width: calc(var(--width) * 1px);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1px));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(6) {
  height: calc(var(--depth) * 1px);
  width: calc(var(--width) * 1px);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1px)) rotateX(180deg);
  position: absolute;
  top: 50%;
  left: 50%;
}

.bridge
  height 44px
  width 100px
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%) rotate(47deg) translate(0px, -4px)

  &__top
    --width 40
    --x 30

    &--center
      --height 4
      --depth 44
      --z calc((var(--bridge-height) + 2) * -1)
      --y 0
      --r 0

      div
        background linear-gradient(90deg, var(--guide), var(--guide)) 50% 36% / 100% 1px no-repeat,
          linear-gradient(90deg, var(--guide), var(--guide)) 50% 58% / 100% 1px no-repeat, var(--track--two)

    &--fence
      --height 10
      --depth 2
      --z calc((var(--bridge-height) + 6) * -1)
      --y 0
      --r 0

      div
        background var(--bridge--two)

        &:nth-of-type(1)
          background var(--bridge--one)
        &:nth-of-type(2)
          background var(--bridge--three)

          &:after
            content "GO!"
            position absolute
            top 0
            left 0
            height 100%
            width 100%
            text-align center
            transform rotate(180deg)
            font-size 8px
            line-height 12px
            font-family sans-serif
            font-weight bold
            color hsl(0, 0%, 100%)
            background-image linear-gradient(45deg, var(--check) 25%, var(--off-check) 25%), linear-gradient(-45deg, var(--check) 25%, var(--off-check) 25%), linear-gradient(45deg, var(--off-check) 75%, var(--check) 75%), linear-gradient(-45deg, var(--off-check) 75%, var(--check) 75%)
            background-size 2px 2px
            background-position 0 0, 0 1px, 1px -1px, -1px 0px
            text-transform uppercase

    &--right
      --y 42

      div:nth-of-type(2):after
        opacity 0

  &__pillar
    --width 4
    --depth 44
    --height var(--bridge-height)
    --z calc(var(--bridge-height) * -0.5)
    div
      background var(--bridge--one)

      &:nth-of-type(2)
        background var(--bridge--three)
      &:nth-of-type(4)
        background hsl(0, 0%, 20%)

    &--one
      --x 30
      --y 0
    &--two
      --x 66
      --y 0

  &__rail
    --depth 2
    --height calc(var(--bridge-height) + 11)
    --width 36
    --x -6
    --z calc((var(--bridge-height) + 11) * -0.5)

    div

      &:nth-of-type(1)
      &:nth-of-type(2)
      &:nth-of-type(5)
      &:nth-of-type(6)
        background transparent

      &:nth-of-type(1)
        --clip polygon(0 0, 100% 100%, 100% 0)
      &:nth-of-type(2)
        --clip polygon(100% 0, 0 100%, 0 0)

      &:nth-of-type(1)
      &:nth-of-type(2)
        &:after
          content ''
          position absolute
          top 0
          left 0
          right 0
          bottom 0
          background var(--bridge--three)
          -webkit-clip-path var(--clip)
          clip-path var(--clip)

      &:nth-of-type(4)
        background transparent
        &:after
          content ''
          position absolute
          top 0
          left 0
          right 0
          height 168%
          background var(--bridge--one)
          transform-origin 50% 0%
          transform rotateX(-53deg)

    &--two
      --y 42
    &--three
      --y 0
      --x 70
      --r 180
    &--four
      --y 42
      --x 70
      --r 180

  &__ramp
    --depth 44
    --height calc(var(--bridge-height) +4)
    --width 30
    --y 0
    --z calc((var(--bridge-height) + 4) * -0.5)

    &--one
      --x 0

    &--two
      --x 70
      --r 180

    div

      &:nth-of-type(1)
      &:nth-of-type(2)
      &:nth-of-type(5)
      &:nth-of-type(6)
        background transparent

      &:nth-of-type(1)
        --clip polygon(0 0, 100% 100%, 100% 0)
      &:nth-of-type(2)
        --clip polygon(100% 0, 0 100%, 0 0)

      &:nth-of-type(1)
      &:nth-of-type(2)
        &:after
          content ''
          position absolute
          top 0
          left 0
          right 0
          bottom 0
          -webkit-clip-path var(--clip)
          clip-path var(--clip)

      &:nth-of-type(4)
        background transparent
        &:after
          content ''
          position absolute
          top 0
          left 0
          right 0
          height calc(var(--bank, 100) * 1%)
          background linear-gradient(var(--guide), var(--guide)) 41% 50% / 1px 100% no-repeat, linear-gradient(var(--guide), var(--guide)) 64% 50% / 1px 100% no-repeat, var(--track--three)
          transform-origin 50% 0%
          transform rotateX(calc(var(--angle) * 1deg))

.race
  transform rotateX(-34deg) rotateY(-34deg) rotateX(-90deg) translate(-2%, 0)

.track
  // 294.438 x 122.550
  --width 294.438px
  --height 122.550px
  height var(--height)
  width var(--width)
  position relative

.road
.burm
.burm__dashes
.markings
.dirt
  position absolute
  height 100%
  width 100%
  top 50%
  left 50%
  transform translate(-50%, -50%)
  transform-style flat
  overflow visible !important
  path
    stroke var(--color)
    stroke-width var(--width)

.start
  --check hsl(0, 0%, 5%)
  position absolute
  height 20px
  width 40px
  left 98%
  top 50%
  transform translate(-50%, -50%)
  background-image linear-gradient(45deg, var(--check) 25%, var(--off-check) 25%), linear-gradient(-45deg, var(--check) 25%, var(--off-check) 25%), linear-gradient(45deg, var(--off-check) 75%, var(--check) 75%), linear-gradient(-45deg, var(--off-check) 75%, var(--check) 75%)
  background-size 4px 4px
  background-position 0 0, 0 2px, 2px -2px, -2px 0px
  background-color hsl(0, 0%, 90%)

.dirt
  --width 50px
  --color var(--dirt)

.road
  --width 20px
  --color var(--track)

.markings
  --width 1px
  --color var(--guide)

.burm
  --width 30px
  --color var(--burm)

  &__dashes
    --width 30px
    --color var(--burm-dash)
    stroke-dasharray 4

.car
  height 10px
  width 10px
  offset-path path(var(--path))
  offset-distance 5%
  position absolute
  transform-style preserve-3d
  top 0px
  left 0px

  &--one
    --hue 10
    --speed 3
    --delay -0.3
    --path var(--player-one)
    animation travel calc(var(--speed) * 1s) calc(var(--delay, 0) * 1s) linear, bridge--one calc(var(--speed) * 1s) calc(var(--delay, 0) * 1s) linear
    animation-iteration-count infinite
    .car__plane
      animation-name rock--one
  &--two
    --hue 220
    --speed 3
    --delay -0.8
    --path var(--player-two)
    animation travel calc(var(--speed) * 1s) calc(var(--delay, 0) * 1s) linear, bridge--two calc(var(--speed) * 1s) calc(var(--delay, 0) * 1s) linear
    animation-iteration-count infinite

    .car__plane
      animation-name rock--two

  &__plane
    position relative
    height 100%
    width 100%
    animation-duration calc(var(--speed, 0) * 1s)
    animation-delay calc(var(--delay, 0) * 1s)
    animation-iteration-count infinite
    animation-timing-function linear

  &__body
    --height 3
    --width 14
    --depth 8
    --z -1.5
    --x -2
    --y 1
    div
      background 'hsl(%s, 50%, 50%)' % var(--hue)

      &:nth-of-type(1)
      &:nth-of-type(2)
        background linear-gradient(var(--decal), var(--decal)) 50% 50% / 2px 2px no-repeat, 'hsl(%s, 50%, 30%)' % var(--hue)
      &:nth-of-type(3)
      &:nth-of-type(4)
        background linear-gradient(var(--bumper), var(--bumper)) 50% 0% / 100% 1px no-repeat, 'hsl(%s, 50%, 70%)' % var(--hue)
      &:nth-of-type(3):after
        content ''
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        background linear-gradient(var(--head), var(--head)) 0 100% / 2px 1px no-repeat, linear-gradient(var(--head), var(--head)) 100% 100% / 2px 1px no-repeat
      &:nth-of-type(4):after
        content ''
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        background linear-gradient(var(--tail), var(--tail)) 0 100% / 2px 1px no-repeat, linear-gradient(var(--tail), var(--tail)) 100% 100% / 2px 1px no-repeat

  &__cab
    --height 2
    --z -4
    --depth 8
    --width 7
    --x 0
    --y 1

    div
      background 'hsl(%s, 50%, 50%)' % var(--hue)

      &:nth-of-type(1)
      &:nth-of-type(2)
        background linear-gradient(var(--glass), var(--glass)) 75% 50% / 2px 2px no-repeat, linear-gradient(var(--glass), var(--glass)) 25% 50% / 2px 2px no-repeat, 'hsl(%s, 50%, 30%)' % var(--hue)
      &:nth-of-type(3)
      &:nth-of-type(4)
        background linear-gradient(var(--glass), var(--glass)) 50% 50% / 6px 2px no-repeat, 'hsl(%s, 50%, 70%)' % var(--hue)

  &__spoiler
    --height 1
    --width 1
    --depth 8
    --y 1
    --x -3
    --z -4

    div
      background-color black

  &__wheels
    --height 2
    --width 2
    --depth 10
    --z -1


    &--rear
      --x 8

    div
      background var(--tyre)

      &:nth-of-type(1)
      &:nth-of-type(2)
        background linear-gradient(var(--rim), var(--rim)) 50% 50% / 1px 1px no-repeat, var(--tyre)

@keyframes travel
  from
    offset-distance 0
  to
    offset-distance 100%

@keyframes bridge--one
  0%, 7%, 21%, 100%
    transform translate3d(0, 0, -1px)
  11%, 17.5%
    transform translate3d(0, 0, calc((var(--bridge-height) + 6) * -1px))

@keyframes bridge--two
  0%, 6.25%, 20%, 100%
    transform translate3d(0, 0, -1px)
  10%, 16.5%
    transform translate3d(0, 0, calc((var(--bridge-height) + 6) * -1px))

@keyframes rock--one
  0%, 6.9%, 11.1%, 17.4%, 21.1%, 100%
    transform-origin 50% 50%
    transform rotateY(0deg) translate3d(0, 0, 0)
  7%, 11%
    transform-origin 0 50%
    transform rotateY(50deg) translate3d(8px, 0, 8px)
  17.5%, 21%
    transform-origin 100% 50%
    transform rotateY(-50deg) translate3d(-8px, 0, 8px)

@keyframes rock--two
  0%, 6.15%, 10.1%, 16.4%, 20.1%, 100%
    transform-origin 50% 50%
    transform rotateY(0deg) translate3d(0, 0, 0)
  6.25%, 10%
    transform-origin 0 50%
    transform rotateY(50deg) translate3d(8px, 0, 8px)
  16.5%, 20%
    transform-origin 100% 50%
    transform rotateY(-50deg) translate3d(-8px, 0, 8px)

body
  background-color var(--bg)
  min-height 100vh
  display flex
  align-items center
  justify-content center
  perspective 1000px
  transform scale(1)
  overflow hidden

  @media(min-width 768px)
    transform scale(2)

  @media(min-width 1200px)
    transform scale(3)