- const URL = ''
//- Front
//- Back
//- Right
//- Left
//- Top
//- Bottom
mixin cuboid(className)
  .cuboid(class=className)
    - let s = 0
    while s < 6
      .cuboid__side
      - s++
audio.ambience(src="https://assets.codepen.io/605876/loyalty-freak-music_everyone.mp3" muted playsinline autoplay loop)
input#zoom(type='checkbox')
label(for="zoom" title="Toggle zoom")
  svg(viewBox="0 0 24 24")
    path(d="M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14M12,10H10V12H9V10H7V9H9V7H10V9H12V10Z")
  svg(viewBox="0 0 24 24")
    path(d="M15.5,14H14.71L14.43,13.73C15.41,12.59 16,11.11 16,9.5A6.5,6.5 0 0,0 9.5,3A6.5,6.5 0 0,0 3,9.5A6.5,6.5 0 0,0 9.5,16C11.11,16 12.59,15.41 13.73,14.43L14,14.71V15.5L19,20.5L20.5,19L15.5,14M9.5,14C7,14 5,12 5,9.5C5,7 7,5 9.5,5C12,5 14,7 14,9.5C14,12 12,14 9.5,14M7,9H12V10H7V9Z")
input#audio(type='checkbox')
label(for="audio" title="Toggle audio")
  svg(viewBox="0 0 24 24")
    path(d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z")
  svg(viewBox="0 0 24 24")
    path(d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z")
input#dark(type='checkbox')
label(for="dark" title="Toggle light")
  svg(viewBox="0 0 24 24")
    path(d="M9,2C7.95,2 6.95,2.16 6,2.46C10.06,3.73 13,7.5 13,12C13,16.5 10.06,20.27 6,21.54C6.95,21.84 7.95,22 9,22A10,10 0 0,0 19,12A10,10 0 0,0 9,2Z")
  svg(viewBox="0 0 24 24")
    path(d="M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z")
input#spin(type='checkbox')
label(for="spin" title="Toggle chair spin")
  svg(viewBox="0 0 24 24")
    path(d="M8,5.14V19.14L19,12.14L8,5.14Z")
  svg(viewBox="0 0 24 24")
    path(d="M18,18H6V6H18V18Z")
.scene__wrapper
  .scene
    //- Plane that all the 3D stuff sits on
    .plane
      .studio
        +cuboid('floor')
        +cuboid('rug')
        +cuboid('wall wall--left')
        .window
          +cuboid('window__frame window__frame--top')
          +cuboid('window__frame window__frame--left')
          +cuboid('window__frame window__frame--right')
          +cuboid('window__frame window__frame--bottom')
          +cuboid('window__frame window__frame--middle')
          .blinds
            - let b = 0
            while b < 11
              .blind(style=`--index: ${b}`)
              - b++
        +cuboid('wall wall--right-left')
        +cuboid('wall wall--right-upper')
        +cuboid('wall wall--right-right')
        +cuboid('skirting skirting--left')
        +cuboid('skirting skirting--right')
        +cuboid('windowsill')
        +cuboid('wall wall--right-lower')
        +cuboid('jfdi')
        +cuboid('shelf')
        .plant
          img.plant__plant(src="https://assets.codepen.io/605876/plant.png?width=204&height=306&format=auto")
          img.plant__plant(src="https://assets.codepen.io/605876/plant.png?width=204&height=306&format=auto")
          img.plant__plant(src="https://assets.codepen.io/605876/plant.png?width=204&height=306&format=auto")
          +cuboid('plant__pot')
        +cuboid('light-cube')

        .desk
          .desk__shadow.desk__shadow--floor
          //- .desk__shadow.desk__shadow--wall
          +cuboid('desk__leg desk__leg--left')
          +cuboid('desk__leg desk__leg--right')
          +cuboid('desk__leg desk__leg--bottom-left')
          +cuboid('desk__leg desk__leg--bottom-right')
          +cuboid('mac')
          +cuboid('desk__top')
          +cuboid('monitor__arm monitor__arm--main')
          +cuboid('monitor__arm monitor__arm--portrait')
          .cuboid.monitor.monitor--main
            .cuboid__side
            .cuboid__side
            .cuboid__side
              iframe(src="https://css-tricks.com")
            .cuboid__side
            .cuboid__side
            .cuboid__side
          .cuboid.monitor.monitor--portrait
            .cuboid__side
            .cuboid__side
            .cuboid__side
              iframe(src="https://jhey.dev")
            .cuboid__side
            .cuboid__side
            .cuboid__side
          .keyboard__base
            .mousemat
            +cuboid('mouse')
            +cuboid('keyboard')
            +cuboid('keyboard__keys')
          +cuboid('studio-light__stand')
          +cuboid('studio-light')
        +cuboid('bear-canvas')
        .chair__base
          .chair__shadow
          +cuboid('chair__wheel chair__wheel--one')
          +cuboid('chair__wheel chair__wheel--two')
          +cuboid('chair__wheel chair__wheel--three')
          +cuboid('chair__wheel chair__wheel--four')
          +cuboid('chair__wheel chair__wheel--five')
          +cuboid('chair__leg chair__leg--one')
          +cuboid('chair__leg chair__leg--two')
          +cuboid('chair__leg chair__leg--three')
          +cuboid('chair__leg chair__leg--four')
          +cuboid('chair__leg chair__leg--five')
          +cuboid('chair__spine')
          .chair__top
            +cuboid('chair__seat')
            +cuboid('chair__wing chair__wing--left')
            +cuboid('chair__wing chair__wing--right')
            +cuboid('chair__back')
            +cuboid('chair__headrest')
            +cuboid('chair__armrest chair__armrest--vertical chair__armrest--vertical--left')
            +cuboid('chair__armrest chair__armrest--vertical chair__armrest--vertical--right')
            +cuboid('chair__armrest chair__armrest--horizontal chair__armrest--horizontal--left')
            +cuboid('chair__armrest chair__armrest--horizontal chair__armrest--horizontal--right')
View Compiled
*
  box-sizing border-box
  transform-style preserve-3d

:root
  --blur 1vmin
  --perspective 2000
  --rotate-x -20
  --rotate-y -45
  --plane-height 50
  --plane-width 50
  --dark 0
  --zoomed 0
  --scale calc(0.75 + (var(--zoomed) * 4))
  --wall-thickness 4
  --cm calc((var(--plane-height) / 240))
  --transition 0.2s
  // Colors
  --floor-shade-one hsl(30, 40%, 40%)
  --floor-shade-two hsl(30, 40%, 60%)
  --floor-shade-three hsl(30, 40%, 80%)
  --windowsill-shade-one hsl(35, 50%, 50%)
  --windowsill-shade-two hsl(35, 50%, 40%)
  --windowsill-shade-three hsl(35, 50%, 30%)
  --wall-shade-one hsl(0, 0%, 98%)
  --wall-shade-two hsl(0, 0%, 95%)
  --wall-shade-three hsl(0, 0%, 90%)
  --wall-shade-four hsl(0, 0%, 85%)
  --skirting-one hsl(0, 0%, 93%)
  --skirting-two hsl(0, 0%, 88%)
  --fade-one hsl(0, 80%, 85%)
  --fade-two hsl(200, 80%, 85%)
  --fade-three hsl(280, 80%, 85%)
  --fade-four hsl(120, 80%, 85%)
  --cube hsl(0, 0%, 95%)
  --leg-one hsl(0, 0%, 10%)
  --leg-two hsl(0, 0%, 12%)
  --leg-three hsl(0, 0%, 14%)
  --leg-four hsl(0, 0%, 16%)
  --rug hsl(210, 40%, 10%)
  --peripheral-one hsl(0, 0%, 20%)
  --peripheral-two hsl(0, 0%, 30%)
  --peripheral-three hsl(0, 0%, 40%)
  --peripheral-four hsl(0, 0%, 50%)
  --mac-one hsl(0, 0%, 80%)
  --mac-two hsl(0, 0%, 70%)
  --blind hsl(30, 50%, 90%)
  --mac-three hsl(0, 0%, 60%)
  --pot-one hsl(20, 50%, 50%)
  --pot-two hsl(20, 50%, 40%)
  --pot-three hsl(20, 50%, 30%)
  --chair-one hsl(0, 0%, 0%)
  --chair-two hsl(0, 0%, 10%)
  --chair-three hsl(0, 0%, 20%)
  --chair-four hsl(0, 0%, 30%)
  --chair-accent-one hsl(0, 0%, 95%)
  --chair-accent-two hsl(0, 60%, 60%)
  --bg hsl(210, 80%, 90%)
  --light hsl(0, 0%, 80%)
  --icon hsl(210, 50%, 60%)

// We're saying that 50vmin === 240cm
audio
  display none
body
  min-height 100vh
  overflow hidden

.dg.ac
  z-index 100
  transform translate3d(0, 0, 50vmin)

// Interactions
[type="checkbox"]
  position absolute
  left 100%
  opacity 0
  height 0
  width 0

label
  position fixed
  z-index 100
  right 1rem
  bottom 1rem
  border-radius 50%
  height 44px
  width 44px
  cursor pointer
  transform translate3d(0, 0, 50vmin) translate(0, calc((var(--index) * -100%) + (var(--index) * -10px)))

svg
  height 28px
  width 28px
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)

path
  fill var(--icon)

[for='spin']
  --index 0
[for='dark']
  --index 1
[for='audio']
  --index 2
[for='zoom']
  --index 3


#spin:checked ~ .scene__wrapper
  --spin 1

#zoom:checked ~ .scene__wrapper
  --zoomed 1
  --scale 4.75

#zoom:checked ~ label:not([for='zoom'])
  display none

#zoom:checked + label
  background hsl(0, 0%, 100%)

#dark:checked ~ .scene__wrapper
  .light-cube div
  .light-cube:after
    animation fade 10s calc(2 * var(--transition)) infinite linear

    @keyframes fade
      0%, 100%
        background var(--fade-one)
      25%
        background var(--fade-two)
      50%
        background var(--fade-three)
      75%
        background var(--fade-four)

  .light-cube:after
    filter blur(var(--blur))

  .wall--left div:nth-of-type(3):after
    opacity 1

  .wall--right-right div:nth-of-type(1):after
  .shelf div:nth-of-type(5):after
    animation fade 10s calc(2 * var(--transition)) infinite linear

  .jfdi div:nth-of-type(3):after
    color hsl(0, 0%, 80%)
  .jfdi div:nth-of-type(4):after
    transition transform var(--transition) var(--transition)
    transform translate(-8%, -16%)

  .windowsill div:nth-of-type(1)
  .windowsill div:nth-of-type(5)
  .floor div:nth-of-type(5)
    filter brightness(0.25)

  .plant__plant
    filter brightness(0.5)

  .chair__back div:nth-of-type(3):after
    filter brightness(0.25)

  .desk__top div:nth-of-type(1)
    filter brightness(0.1)
  .desk__top div:nth-of-type(3)
    filter brightness(0.3)
  .desk__top div:nth-of-type(5)
    filter brightness(0.2)

  .bear-canvas div
    filter brightness(0.35)

  .bear-canvas div:nth-of-type(1)
    filter brightness(0.35) grayscale(1)

  .rug div:nth-of-type(5)
    filter brightness(0.25)

#zoom:checked ~ .scene__wrapper
  .scene
  .studio
  .plane
    transition transform var(--transition)
  .chair
    transition opacity var(--transition)

// Flip switches plus colors
#dark:checked ~ .scene__wrapper
  --dark 1
  --floor-shade-one hsl(30, 40%, 10%)
  --floor-shade-two hsl(30, 40%, 20%)
  --floor-shade-three hsl(30, 40%, 30%)
  --windowsill-shade-one hsl(35, 50%, 30%)
  --windowsill-shade-two hsl(35, 50%, 20%)
  --windowsill-shade-three hsl(35, 50%, 10%)
  --wall-shade-one hsl(0, 0%, 38%)
  --wall-shade-two hsl(0, 0%, 35%)
  --wall-shade-three hsl(0, 0%, 30%)
  --wall-shade-four hsl(0, 0%, 25%)
  --skirting-one hsl(0, 0%, 33%)
  --skirting-two hsl(0, 0%, 28%)
  --fade-one hsl(0, 80%, 85%)
  --fade-two hsl(200, 80%, 85%)
  --fade-three hsl(280, 80%, 85%)
  --fade-four hsl(120, 80%, 85%)
  --leg-one hsl(0, 0%, 5%)
  --leg-two hsl(0, 0%, 6%)
  --leg-three hsl(0, 0%, 7%)
  --leg-four hsl(0, 0%, 8%)
  --rug hsl(210, 40%, 10%)
  --peripheral-one hsl(0, 0%, 10%)
  --peripheral-two hsl(0, 0%, 15%)
  --peripheral-three hsl(0, 0%, 20%)
  --peripheral-four hsl(0, 0%, 25%)
  --mac-one hsl(0, 0%, 20%)
  --mac-two hsl(0, 0%, 18%)
  --mac-three hsl(0, 0%, 15%)
  --pot-one hsl(20, 50%, 30%)
  --pot-two hsl(20, 50%, 20%)
  --blind hsl(30, 50%, 20%)
  --pot-three hsl(20, 50%, 10%)
  --chair-one hsl(0, 0%, 0%)
  --chair-two hsl(0, 0%, 5%)
  --chair-three hsl(0, 0%, 10%)
  --chair-four hsl(0, 0%, 15%)
  --chair-accent-one hsl(0, 0%, 40%)
  --chair-accent-two hsl(0, 60%, 30%)
  --bg hsl(210, 80%, 10%)
  --cube hsl(0, 0%, 40%)
  --light hsl(0, 0%, 100%)
  --icon hsl(210, 80%, 30%)


:checked + label svg:last-of-type
  display block
:checked + label svg:first-of-type
  display none

label svg:last-of-type
  display none

.scene
  perspective calc(var(--perspective, 800) * 1px)
  transform-style preserve-3d
  height 100vh
  width 100vw
  display flex
  align-items center
  justify-content center
  transform scale(var(--scale)) translate3d(0, 0, 50vmin)

  &__wrapper
    transition background var(--transition)
    background var(--bg)

.plane
  height calc(var(--plane-height, 25) * 1vmin)
  width calc(var(--plane-width, 25) * 1vmin)
  transform-style preserve-3d
  transform rotateX(calc((var(--rotate-x, -24) - (var(--zoomed) * var(--rotate-x, -24))) * 1deg)) rotateY(calc(((var(--rotate-y, -24) - (var(--zoomed) * var(--rotate-y, -24))) + (var(--zoomed) * -90)) * 1deg)) rotateX(90deg) translate3d(0, 0, 0)

  &:before
    content ''
    background hsla(0, 0%, 0%, 0.5)
    filter blur(var(--blur))
    height 112%
    width 112%
    position absolute
    top -8%
    left -10%
    transform translate3d(0, 0, -11vmin)
    z-index -1

// This is what makes the CSS variable powered cuboid
.cuboid
  --width var(--cuboid-width, 15)
  --height var(--cuboid-height, 10)
  --depth var(--cuboid-depth, 4)
  height calc(var(--depth) * 1vmin)
  width calc(var(--width) * 1vmin)
  position absolute
  transform rotateZ(calc(var(--starting-rotation, 0) * 1deg)) translate3d(calc(var(--x, 0) * 1vmin), calc(var(--y, 0) * 1vmin), calc(var(--z, 0) * 1vmin)) rotateX(calc(var(--rotate-cuboid-x, 0) * 1deg)) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg))
  transform-style preserve-3d

  &__side
    transform-style preserve-3d

  & > div:nth-of-type(1)
    height calc(var(--height) * 1vmin)
    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) * 1vmin))

  & > div:nth-of-type(2)
    height calc(var(--height) * 1vmin)
    width 100%
    transform-origin 50% 50%
    transform translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin))
    position absolute
    top 50%
    left 50%

  & > div:nth-of-type(3)
    height calc(var(--height) * 1vmin)
    width calc(var(--depth) * 1vmin)
    transform translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin))
    position absolute
    top 50%
    left 50%

  & > div:nth-of-type(4)
    height calc(var(--height) * 1vmin)
    width calc(var(--depth) * 1vmin)
    transform translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin))
    position absolute
    top 50%
    left 50%

  & > div:nth-of-type(5)
    height calc(var(--depth) * 1vmin)
    width calc(var(--width) * 1vmin)
    transform translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vmin))
    position absolute
    top 50%
    left 50%

  & > div:nth-of-type(6)
    height calc(var(--depth) * 1vmin)
    width calc(var(--width) * 1vmin)
    transform translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg)
    position absolute
    top 50%
    left 50%

.studio
  height 100%
  width 100%
  transform translate3d(0, 0, calc((-10 + (var(--zoomed) * -10)) * 1vmin))

.floor
  --height 1
  --width calc(50 + var(--wall-thickness))
  --depth calc(50 + var(--wall-thickness))
  --z -0.5
  --y calc(var(--wall-thickness) * -1)
  --x calc(var(--wall-thickness) * -1)
  transition background var(--transition)

  div:not(.studio__shadow)
    background var(--floor-shade-three)

  div:nth-of-type(1)
    background var(--floor-shade-one)
  div:nth-of-type(3)
    background var(--floor-shade-two)

  div:nth-of-type(5)
    transition filter var(--transition)
    filter brightness(1)

    &:after
      content ''
      position absolute
      top 0
      left 0
      height 100%
      width 100%
      transform rotate(90deg)
      background url('https://images.pexels.com/photos/235994/pexels-photo-235994.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260') 0 0 / 15vmin 15vmin

.wall
  transition background var(--transition)
  &--left
    --height calc(220 * var(--cm))
    --width var(--wall-thickness)
    --depth calc((240 * var(--cm)) + var(--wall-thickness))
    --z calc(110 * var(--cm))
    --x calc(var(--wall-thickness) * -1)
    --y calc(var(--wall-thickness) * -1)

    div
      &:nth-of-type(1)
        background var(--wall-shade-four)
      &:nth-of-type(2)
        background var(--wall-shade-one)
      &:nth-of-type(3)
        background var(--wall-shade-one)
        overflow hidden
        &:before
          content ''
          position absolute
          top 0
          left 0
          height 100%
          width 100%
          overflow hidden
          filter blur(var(--blur))
          background radial-gradient(hsla(0, 0%, 0%, 0.5), transparent 100%) 80% 64% / 20% 35% no-repeat,
            radial-gradient(hsla(0, 0%, 0%, 0.5), transparent 100%) 45% 58% / 45% 20% no-repeat,
            radial-gradient(rgba(0,0,0,0.5), transparent 100%) 36% 100%/64% 30% no-repeat
        &:after
          content ''
          position absolute
          top 0
          left 0
          height 80%
          width 80%
          overflow hidden
          filter blur(var(--blur))
          transform rotate(41deg) translate(-18%, -36%)
          opacity 0
          transition opacity var(--transition) var(--transition)
          background radial-gradient(circle at 50% 100%, hsla(45, 50%, 90%, 0.85), transparent 60%)

      &:nth-of-type(5)
        background var(--wall-shade-three)
      &:nth-of-type(4)
      &:nth-of-type(6)
        background var(--wall-shade-two)

  &--right-lower
    --height calc(100 * var(--cm))
    --width 50
    --depth var(--wall-thickness)
    --z calc(50 * var(--cm))
    --y calc(var(--wall-thickness) * -1)

    &:after
      content ''
      height 30%
      width calc((114 * var(--cm)) * 1vmin)
      top 102%
      left calc((22 * var(--cm)) * 1vmin)
      filter blur(calc(0.75 * var(--blur)))
      background hsla(0, 0%, 0%, 0.5)
      position absolute
      transform-origin 50% 0
      transform rotateX(90deg) translate(0, calc((44 * var(--cm)) * 1vmin))

    div
      background var(--wall-shade-four)
      &:nth-of-type(5)
        background var(--wall-shade-three)
      &:nth-of-type(2)
      &:nth-of-type(3)
        background var(--wall-shade-one)

  &--right-left
    --height calc(220 * var(--cm))
    --width calc(22 * var(--cm))
    --depth var(--wall-thickness)
    --z calc(110 * var(--cm))
    --y calc(var(--wall-thickness) * -1)

    div
      background var(--wall-shade-four)
      &:nth-of-type(3)
        background var(--wall-shade-two)
      &:nth-of-type(2)
        background var(--wall-shade-one)


  &--right-upper
    --height calc(22 * var(--cm))
    --width calc(240 * var(--cm))
    --depth var(--wall-thickness)
    --z calc(209 * var(--cm))
    --y calc(var(--wall-thickness) * -1)

    div
      background var(--wall-shade-four)

      &:nth-of-type(2)
      &:nth-of-type(3)
        background var(--wall-shade-one)
      &:nth-of-type(5)
        background var(--wall-shade-three)

  &--right-right
    --height calc(220 * var(--cm))
    --width calc((240 - 136) * var(--cm))
    --depth var(--wall-thickness)
    --z calc(110 * var(--cm))
    --y calc(var(--wall-thickness) * -1)
    --x calc(136 * var(--cm))


    div
      background var(--wall-shade-four)

      &:nth-of-type(1):after
        content ''
        position absolute
        height 24%
        width 70%
        border-radius 50%
        background none
        filter blur(calc(2 * var(--blur)))
        top 15%
        left 15%
        opacity 0.75

      &:nth-of-type(2)
      &:nth-of-type(3)
        background var(--wall-shade-one)
      &:nth-of-type(4)
        background var(--wall-shade-four)
      &:nth-of-type(5)
        background var(--wall-shade-three)

.windowsill
  --height calc(2 * var(--cm))
  --depth calc(22 * var(--cm))
  --width calc(114 * var(--cm))
  --z calc(100 * var(--cm) )
  --x calc(22 * var(--cm))
  --y calc(var(--wall-thickness) * -0.8)

  div
    background var(--windowsill-shade-one)

    &:nth-of-type(1)
      transition filter var(--transition)
      filter brightness(0.5)
      background url("https://images.pexels.com/photos/172276/pexels-photo-172276.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")
    &:nth-of-type(2)
      background var(--wall-shade-one)
    &:nth-of-type(5)
      transition filter var(--transition)
      background url("https://images.pexels.com/photos/172276/pexels-photo-172276.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")
    &:nth-of-type(6)
      background var(--windowsill-shade-three)

.studio-light
  --width calc(4 * var(--cm))
  --height calc(15 * var(--cm))
  --depth calc(30 * var(--cm))
  --z calc(146 * var(--cm))
  --rotate-cuboid-z 20
  --rotate-cuboid-x 30
  --rotate-cuboid-y 45

  top 86%
  left 15%
  margin-top calc((-15 * var(--cm)) * 1vmin)

  div
    background var(--peripheral-four)
    transition background var(--transition)

    &:nth-of-type(4)
      background var(--light)
      transition background var(--transition) var(--transition)
    &:nth-of-type(5)
      background var(--peripheral-two)
    &:nth-of-type(3)
      background var(--peripheral-one)

  &__stand
    --width calc(3 * var(--cm))
    --depth calc(3 * var(--cm))
    --height calc(80 * var(--cm))
    --z calc(100 * var(--cm))

    top 85%
    left 15%

    div
      background var(--peripheral-four)

      &:nth-of-type(1)
        background var(--peripheral-one)
      &:nth-of-type(3)
        background var(--peripheral-three)

.desk
  height calc((180 * var(--cm)) * 1vmin)
  width calc((68 * var(--cm)) * 1vmin)
  top calc((30 * var(--cm)) * 1vmin)
  left calc((0 * var(--cm)) * 1vmin)
  position absolute

  &__shadow
    background hsla(0, 0%, 0%, 0.5)
    filter blur(var(--blur))
    position absolute

    &--floor
      background radial-gradient(circle at 0 50%, hsla(0, 0%, 0%, 0.35) 50%, transparent 80%)
      height 110%
      width 80%
      top 5%

  &__leg
    --width calc(8 * var(--cm))
    --depth calc(5 * var(--cm))
    --height calc(64 * var(--cm))
    --z calc(32 * var(--cm))
    --x calc(20 * var(--cm))

    &--right
      --y calc(15 * var(--cm))
    &--left
      --y calc(160 * var(--cm))
    &--bottom-right
      --width calc(50 * var(--cm))
      --height calc(2 * var(--cm))
      --y calc(15 * var(--cm))
      --x calc(5 * var(--cm))
      --z calc(1 * var(--cm))
    &--bottom-left
      --width calc(50 * var(--cm))
      --height calc(2 * var(--cm))
      --x calc(5 * var(--cm))
      --y calc(160 * var(--cm))
      --z calc(1 * var(--cm))

    div
      transition background var(--transition)
      background var(--leg-one)

      &:nth-of-type(1)
        background var(--leg-two)


  &__top
    --height calc(4 * var(--cm))
    --width calc(68 * var(--cm))
    --depth calc(180 * var(--cm))
    --z calc(64 * var(--cm))

    div
      background url('https://images.pexels.com/photos/978484/pexels-photo-978484.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940') 0 0 / 20vmin 30vmin
      transition filter var(--transition), background var(--transition)
      &:nth-of-type(1)
        filter brightness(0.25)
      &:nth-of-type(5)
        filter brightness(0.5)
      &:nth-of-type(6)
        background var(--floor-shade-three)

.jfdi
  --height calc(40 * var(--cm))
  --width calc(2 * var(--cm))
  --depth calc(60 * var(--cm))
  --y calc(90 * var(--cm))
  --x var(--cm)
  --z calc(190 * var(--cm))

  div
    background black

    &:nth-of-type(4):after
      content ''
      background hsla(0, 0%, 0%, 0.5)
      position absolute
      top 8%
      left 4%
      height 100%
      width 100%
      transition transform var(--transition)
      filter blur(var(--blur))

    &:nth-of-type(3)
      background hsl(0, 0%, 15%)

    &:nth-of-type(3):after
      transition color var(--transition)
      content 'JFDI'
      position absolute
      top 0
      left 0
      height 100%
      width 100%
      color hsl(0, 0%, 100%)
      font-weight bold
      font-family sans-serif
      font-size calc((22 * var(--cm)) * 1vmin)
      text-align center
      line-height calc((40 * var(--cm) * 1vmin))


.shelf
  --height calc(5 * var(--cm))
  --depth calc(26 * var(--cm))
  --width calc(60 * var(--cm))
  --z calc(144 * var(--cm))
  --y var(--cm)
  --x calc(170 * var(--cm))

  div
    background var(--wall-shade-three)

    &:nth-of-type(5)
      background var(--wall-shade-one)
      overflow hidden

      &:after
        content ''
        height 200%
        border-radius 50%
        width 100%
        position absolute
        left 50%
        top 50%
        filter blur(calc(2 * var(--blur)))
        transform translate(-80%, -50%)

    &:nth-of-type(3)
      background var(--wall-shade-two)

    &:nth-of-type(2):after
      content ''
      width 100%
      height 250%
      position absolute
      top 110%
      left 4%
      background hsla(0, 0%, 0%, 0.5)
      transform-origin 50% 0
      transform skewX(-5deg)
      filter blur(var(--blur))

.light-cube
  --height calc(15 * var(--cm))
  --width calc(15 * var(--cm))
  --depth calc(15 * var(--cm))
  --z calc(155 * var(--cm))
  --x calc(180 * var(--cm))
  --y calc(5 * var(--cm))
  --rotate-cuboid-z 40

  div
    background var(--wall-shade-one)

    &:nth-of-type(1)
      background var(--wall-shade-three)
    &:nth-of-type(3)
      background var(--wall-shade-two)

.skirting
  &--left
    --height calc(8 * var(--cm))
    --width calc(2 * var(--cm))
    --depth calc(240 * var(--cm))
    --z calc(4 * var(--cm))
    div
      background var(--skirting-one)
      &:nth-of-type(3)
        background var(--skirting-one)
        &:after
          content ''
          position absolute
          top 0
          left 0
          height 100%
          width 100%
          filter blur(var(--blur))
          background radial-gradient(circle at 50% 50%, hsla(0, 0%, 0%, 0.5) 0 75%, transparent) 40% 0 / 70% 150% no-repeat
      &:nth-of-type(5)
        background linear-gradient(transparent, hsla(0, 0%, 0%, 0.5), transparent) 0 50% / 100% 70% no-repeat, var(--skirting-one)
  &--right
    --height calc(8 * var(--cm))
    --width calc(240 * var(--cm))
    --depth calc(2 * var(--cm))
    --z calc(4 * var(--cm))
    div
      background var(--skirting-two)

.rug
  --height calc(1 * var(--cm))
  --width calc(140 * var(--cm))
  --depth calc(140 * var(--cm))
  --x calc(80 * var(--cm))
  --y calc(50 * var(--cm))
  --z calc(0.5 * var(--cm))

  div
    background var(--rug)

    &:nth-of-type(5)
      transition filter var(--transition)
      filter brightness(1)
      background url('https://images.pexels.com/photos/3707669/pexels-photo-3707669.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')
      background-size cover

.monitor
  &--main
    --width calc(3 * var(--cm))
    --depth calc(86 * var(--cm))
    --height calc(36 * var(--cm))
    --z calc(106 * var(--cm))
    --y calc(-43 * var(--cm))
    --x calc(10 * var(--cm))
    top 50%

  &--portrait
    --depth calc(34 * var(--cm))
    --width calc(3 * var(--cm))
    --height calc(56 * var(--cm))
    --z calc(104 * var(--cm))
    --x calc(20 * var(--cm))
    --rotate-cuboid-z 30
    top 8%

  div
    background var(--peripheral-one)

    &:nth-of-type(3)
    &:nth-of-type(5)
      background var(--peripheral-four)
    &:nth-of-type(2)
      background var(--peripheral-three)

  iframe
    position absolute
    height 800%
    width 800%
    top 50%
    left 50%
    transform translate(-50%, -50%) scale(0.125)

  &__arm
    --width calc(4 * var(--cm))
    --depth calc(4 * var(--cm))
    --height calc(30 * var(--cm))
    --z calc(80 * var(--cm))
    &--main
      --x calc(6 * var(--cm))
      top 65%
    &--portrait
      --x calc(20 * var(--cm))
      --rotate-cuboid-z 30
      top 10%

    div
      background var(--peripheral-four)
      &:nth-of-type(3)
      &:nth-of-type(5)
        background var(--peripheral-four)
      &:nth-of-type(1)
        background var(--peripheral-one)

.mac
  --width calc(20 * var(--cm))
  --height calc(5 * var(--cm))
  --depth calc(20 * var(--cm))
  --z calc(60 * var(--cm))
  --x calc(44 * var(--cm))
  top 10%
  div
    background var(--mac-three)
    &:nth-of-type(1)
      background var(--mac-one)
    &:nth-of-type(3)
      background var(--mac-two)

.keyboard
  --depth calc(38 * var(--cm))
  --width calc(14 * var(--cm))
  --height calc(2 * var(--cm))
  --z calc(1 * var(--cm))

  div
    background var(--peripheral-two)

    &:nth-of-type(1)
      background var(--peripheral-one)

  &__keys
    --depth calc(36 * var(--cm))
    --width calc(12 * var(--cm))
    --height calc(3 * var(--cm))
    --z calc(1.5 * var(--cm))
    --x calc(1 * var(--cm))
    --y calc(1 * var(--cm))
    div
      background hsl(0, 0%, 60%)

      &:nth-of-type(5):after
        content ''
        position absolute
        top 0%
        left 0%
        transform-origin 0% 0%
        width calc((36 * var(--cm)) * 1vmin)
        height calc((12 * var(--cm)) * 1vmin)
        transform rotate(270deg) translate(-100%, 0%)
        background url('https://assets.codepen.io/605876/keychron-keys.png?width=338&height=109&format=auto')
        background-size cover

  &__base
    transform-style preserve-3d
    height calc((38 * var(--cm)) * 1vmin)
    width calc((14 * var(--cm)) * 1vmin)
    top 50%
    left 60%
    position absolute
    transform translate3d(0, -50%, calc((66 * var(--cm)) * 1vmin))

.mousemat
  height 260%
  width 200%
  background black
  position absolute
  top 50%
  left 50%
  transform translate3d(-50%, -50%, calc(var(--cm) * 0.1vmin))

.mouse
  --depth calc(6 * var(--cm))
  --width calc(10 * var(--cm))
  --height calc(4 * var(--cm))
  --z calc(2 * var(--cm))
  top -40%
  left 20%

  div
    background var(--peripheral-three)

    &:nth-of-type(1)
      background var(--peripheral-one)
    &:nth-of-type(2)
    &:nth-of-type(3)
      background var(--peripheral-four)
    &:nth-of-type(5):after
      content ''
      height 25%
      width 30%
      background hsl(90, 80%, 50%)
      position absolute
      top 50%
      left 25%
      transform translate(-50%, -50%)

.bear-canvas
  --width calc(60 * var(--cm))
  --height calc(60 * var(--cm))
  --depth calc(2 * var(--cm))
  --z calc(80 * var(--cm))
  --x calc(168 * var(--cm))
  --y var(--cm)

  div
    background hsl(0, 0%, 95%)
    filter brightness(1)
    transition filter var(--transition)

    &:nth-of-type(1)
      background linear-gradient(hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 100%, 0.25)), url("https://assets.codepen.io/605876/avatar.png"), hsl(0, 0%, 98%)
      background-size 75%
      background-position center
      background-repeat no-repeat
      filter brightness(1) grayscale(1)

    &:nth-of-type(2):after
      content ''
      height 100%
      width 100%
      background hsla(0, 0%, 0%, 0.5)
      filter blur(var(--blur))
      position absolute
      top 10%
      left -5%

.window
  width calc((114 * var(--cm)) * 1vmin)
  background linear-gradient(40deg, transparent 20%, hsla(0, 0%, 100%, 0.5), transparent 50%), linear-gradient(40deg, transparent 50%, hsla(0, 0%, 100%, 0.25), transparent 60%), hsla(190, 80%, 90%, 0.25)
  height calc((95 * var(--cm)) * 1vmin)
  position absolute
  transform rotateX(90deg) translate3d(calc((22 * var(--cm)) * 1vmin), calc((102 * var(--cm)) * 1vmin), calc((18 * var(--cm)) * 1vmin))
  transform-origin 50% 0%

  &__frame
    &--top
    &--middle
    &--bottom
      --depth calc(4 * var(--cm))
      --width calc(115 * var(--cm))
      --height calc(4 * var(--cm))

      div
        background hsl(0, 0%, 98%)

        &:nth-of-type(6)
          background hsl(0, 0%, 90%)

    &--top
      bottom 0

    &--middle
      top 60%


    &--left
    &--right
      --depth calc(95 * var(--cm))
      --width calc(4 * var(--cm))
      --height calc(4 * var(--cm))

      div
        background hsl(0, 0%, 98%)

        &:nth-of-type(6)
          background hsl(0, 0%, 90%)

    &--right
      right 0

.blinds
  height 100%
  width 100%
  position absolute
  top 0
  left 0
  transform translate3d(0, 0, calc((-10 * var(--cm)) * 1vmin)) rotate(180deg)

  &:after
    content ""
    background hsla(0, 0%, 50%, 0.1)
    height 100%
    width 100%
    position absolute
    top 0
    left 0
    transform-origin 50% 0%
    transition transform calc(2 * var(--transition)) var(--transition)
    transform scaleY(var(--dark))

.blind
  height 10%
  width 100%
  position absolute
  top -5%
  left 0
  background var(--blind)
  transform-origin 50% 50%
  transition transform calc(2 * var(--transition)) var(--transition), background var(--transition)
  // Can be translated by 100% or 1%
  // Can be rotated by -2deg or -90deg
  transform translate(0, calc((var(--index) * (100 * var(--dark))) * 1%)) rotateX(calc((-85 + (var(--dark) * 83)) * 1deg))

.plant
  height calc((14 * var(--cm)) * 1vmin)
  width calc((14 * var(--cm)) * 1vmin)
  position absolute
  transform translate3d(calc((208 * var(--cm)) * 1vmin), calc((6 * var(--cm)) * 1vmin), calc((146 * var(--cm)) * 1vmin))

  &__plant
    transition filter var(--transition)
    filter brightness(1)
    height calc((50 * var(--cm)) * 1vmin)
    position absolute
    bottom 50%
    left 50%
    transform-origin 50% 100%
    transform translate(-50%, 0) rotateX(-90deg) translate3d(0, calc((var(--cm) * 10) * -1vmin), 0) rotateY(calc(var(--r, 0) * 1deg))

    &:nth-of-type(2)
      --r 90
    &:nth-of-type(3)
      --r 220

  &__pot
    --height calc(10 * var(--cm))
    --width calc(14 * var(--cm))
    --depth calc(14 * var(--cm))
    --z calc(6 * var(--cm))

    div
      background var(--pot-three)

      &:nth-of-type(1)
        background var(--pot-two)

      &:nth-of-type(3)
        background var(--pot-one)

      &:nth-of-type(5)
        background #111

.chair
  &__base
    opacity calc(1 - var(--zoomed))
    height calc((66 * var(--cm)) * 1vmin)
    width calc((66 * var(--cm)) * 1vmin)
    position absolute
    top 50%
    left 50%
    transform translate3d(-30%, -70%, calc((2 * var(--cm)) * 1vmin)) rotateZ(-25deg)

  &__shadow
    background hsla(0, 0%, 0%, 0.75)
    height 115%
    width 115%
    border-radius 50%
    filter blur(calc(1.5 * var(--blur)))
    position absolute
    top 50%
    left 50%
    transform translate(-55%, -45%)

  &__wheel
    --height calc(6 * var(--cm))
    --width calc(6 * var(--cm))
    --depth calc(6 * var(--cm))
    --z calc(3 * var(--cm))
    --x calc(30 * var(--cm))

    top 50%
    left 50%
    margin-left calc((-3 * var(--cm)) * 1vmin)
    margin-top calc((-3 * var(--cm)) * 1vmin)

    &--one
      --starting-rotation 0
    &--two
      --starting-rotation 72
    &--three
      --starting-rotation 144
    &--four
      --starting-rotation 216
    &--five
      --starting-rotation 288


    div
      background var(--peripheral-three)

      &:nth-of-type(1)
      &:nth-of-type(2)
        background black

  &__spine
    --height calc(30 * var(--cm))
    --width calc(6 * var(--cm))
    --depth calc(6 * var(--cm))
    --z calc(20 * var(--cm))

    top 50%
    left 50%
    margin-left calc((-3 * var(--cm)) * 1vmin)
    margin-top calc((-3 * var(--cm)) * 1vmin)

    div
      background black

      &:nth-of-type(1)
        background var(--peripheral-four)

  &__leg
    --height calc(4 * var(--cm))
    --width calc(30 * var(--cm))
    --depth calc(6 * var(--cm))
    --z calc(8 * var(--cm))
    --x calc(18 * var(--cm))

    top 50%
    left 50%
    margin-left calc((-15 * var(--cm)) * 1vmin)
    margin-top calc((-3 * var(--cm)) * 1vmin)

    &--one
      --starting-rotation 0
    &--two
      --starting-rotation 72
    &--three
      --starting-rotation 144
    &--four
      --starting-rotation 216
    &--five
      --starting-rotation 288


    div
      background var(--mac-one)

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

  &__seat
    --height calc(10 * var(--cm))
    --width calc(50 * var(--cm))
    --depth calc(40 * var(--cm))
    --z calc(32 * var(--cm))

    top 50%
    left 50%
    margin-left calc((-25 * var(--cm)) * 1vmin)
    margin-top calc((-20 * var(--cm)) * 1vmin)

    div
      background var(--chair-one)

      &:nth-of-type(1)
      &:nth-of-type(2)
        background var(--chair-accent-one)

  &__wing
    --height calc(10 * var(--cm))
    --width calc(50 * var(--cm))
    --depth calc(16 * var(--cm))
    --z calc(34 * var(--cm))
    top 50%
    left 50%
    margin-left calc((-25 * var(--cm)) * 1vmin)

    &--right
      margin-top calc((-28 * var(--cm)) * 1vmin)
      --rotate-cuboid-x -15

      div:nth-of-type(2)
        background var(--chair-accent-one)
        border calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two)

    &--left
      margin-top calc((12 * var(--cm)) * 1vmin)
      --rotate-cuboid-x 15

      div:nth-of-type(1)
        background var(--chair-accent-one)
        border calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two)

    div
      background var(--chair-two)

  &__back
    --height calc(66 * var(--cm))
    --depth calc(48 * var(--cm))
    --width calc(10 * var(--cm))
    --z calc(64 * var(--cm))
    --rotate-cuboid-y 10

    right 0%
    top 50%
    margin-top calc((-24 * var(--cm)) * 1vmin)

    div
      background var(--chair-three)

      &:nth-of-type(1)
      &:nth-of-type(2)
        background var(--chair-two)
        border calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two)

      &:nth-of-type(3):after
        content ''
        position absolute
        top 25%
        left 50%
        transform translate(-50%, -50%)
        height 40%
        width 40%
        filter brightness(1)
        transition filter var(--transition)
        background url("https://assets.codepen.io/605876/avatar.png")
        background-size contain
        background-repeat no-repeat


  &__top
    height 100%
    width 100%
    position absolute
    animation-name spin
    animation-iteration-count infinite
    animation-timing-function linear
    animation-duration calc(var(--spin, 0) * 1s)

    @keyframes spin
      to
        transform rotateZ(360deg)

  &__headrest
    --height calc(20 * var(--cm))
    --depth calc(40 * var(--cm))
    --width calc(10 * var(--cm))
    --z calc(100 * var(--cm))

    top 50%
    right -5%
    margin-top calc((-20 * var(--cm)) * 1vmin)

    div
      background var(--chair-two)

      &:nth-of-type(1)
      &:nth-of-type(2)
        border calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two)

      &:nth-of-type(5)
        background var(--chair-three)

  &__armrest
    &--horizontal
      --height calc(4 * var(--cm))
      --width calc(30 * var(--cm))
      --depth calc(8 * var(--cm))
      --z calc(52 * var(--cm))

      left 20%

      &--right
        top -5%
      &--left
        bottom -5%

      div
        background var(--chair-four)

        &:nth-of-type(1)
          background var(--chair-three)

    &--vertical
      --height calc(20 * var(--cm))
      --depth calc(6 * var(--cm))
      --width calc(6 * var(--cm))
      --z calc(40 * var(--cm))
      left 35%

      &--right
        top -4%
      &--left
        bottom -4%

      div
        background var(--chair-three)

        &:nth-of-type(1)
          background var(--chair-one)

View Compiled
// Purely for toggling audio
const AUDIO_TOGGLE = document.querySelector('#audio')
const AUDIO = document.querySelector('.ambience')
AUDIO.volume = 0.5
AUDIO_TOGGLE.addEventListener('input', () => {
  AUDIO.muted = !AUDIO.muted
  AUDIO.play()
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.