@font-face {
    font-family: 'VenturisSansADFLt-Bold';
    src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25387/VenturisSansADFLt-Bold.ttf.woff') format('woff'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25387/VenturisSansADFLt-Bold.ttf.svg#VenturisSansADFLt-Bold') format('svg'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25387/VenturisSansADFLt-Bold.ttf.eot'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25387/VenturisSansADFLt-Bold.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

:root {
  --zoom: 1; // updated by mousewheel
  --zoom-square: calc( var(--zoom) * var(--zoom) );
  --camera-x: 0; // updated by mousemove
  --camera-y: 0; // updated by mousemove
  --row-count: 0; // will be set from JS
  --col-count: 0; // will be set from JS
  --tile-width: 1em;
  --gap-width: calc(var(--tile-width) * 5 / 100);
  --total-tile-width: calc(1em + var(--gap-width));
  --gap-color: #666;
}

@function tile($n) {
  @return calc(#{$n} * var(--tile-width));
}

@function totalTile($n) {
  @return calc(#{$n} * var(--total-tile-width));
}

body {
  height: 100vh;
  display: grid;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-size: 7vmin;
  perspective: 150vmin;
  background: lighten(cadetblue, 35%);
}

.loading-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(#fff, .85);
}

.has-loaded .loading-overlay {
  display: none;
}

.loading-message {
  font-size: 3rem;

  &::after {
    content: "✨";
    animation: loading-message .5s infinite;
  }
}

@keyframes loading-message {
  from, to {
    content: "Loading ✨";
  }
  33% {
    content: "Loading 🍓";
  }
  66% {
    content: "Loading ⚡️";
  }
}

.tile {
  width: tile(1);
  height: tile(1);
  display: grid;
  gap: var(--gap-width);
  background: var(--gap-color);
}

.enable-shadows .tile span {
  $light-shadow-pos: tile(.02) tile(.02) tile(.06);
  $dark-shadow-pos: tile(-.02) tile(-.02) tile(.08);
  box-shadow:
    inset $light-shadow-pos rgba(255, 200, 50, .25),
    inset $dark-shadow-pos rgba(30, 10, 0, .5);
}

.tile.half-vertical {
  width: tile(.3);
  height: tile(.4);
}

.tile.masonry-vertical {
  grid-template: .6fr 1.4fr / 1fr;
  width: tile(.3);

  &.odd {
    grid-template: 1.4fr .6fr / 1fr;
  }
}

.tile.half-horizontal {
  width: tile(.475);
  height: tile(.33);
}

.tile.single-horizontal {
  height: tile(.33);
}

.tile.vertical {
  grid-template: 1fr / repeat(3, 1fr);
}

.tile.horizontal {
  grid-template: repeat(3, 1fr) / 1fr 1fr;

  :first-child {
    grid-area: 1 / span 2;
  }

  :last-child {
    grid-area: 3 / span 2;
  }
}

.wall {
  position: relative;
  background: var(--gap-color);
  transform-style: preserve-3d;
  transform:
    rotateX( calc(var(--camera-y) * -15deg) )
    rotateY( calc(var(--camera-x) * 15deg) )
    scale( calc(var(--zoom)) );
  will-change: transform;
}

.wall-rain-shield {
  position: absolute;
  top: tile(-.26);
  left: 0;
  z-index: 5;
  width: 100%;
  height: tile(.4);
  background: #bbb;
}

.enable-3d-transformations .wall-rain-shield {
  transform-origin: top center;
  transform:
    translateZ(tile(.6))
    rotateX(30deg);
}

#wall-half-vertical-tiles {
  position: relative;
  z-index: 4;
  display: grid;
  gap: var(--gap-width);
  grid-template: 1fr / repeat(calc(3 * var(--col-count)), 1fr);
  background: var(--gap-color);
}

.enable-shadows #wall-half-vertical-tiles {
  box-shadow: 0 tile(.25) tile(.1) rgba(#000, .5);

  // Shadow of rain shield ¯\_(ツ)_/¯
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow:  inset 0 tile(.2) tile(.1) rgba(#000, .5),
  }
}

.enable-3d-transformations #wall-half-vertical-tiles {
  transform: translateZ(tile(.6));
}

#wall-masonry-vertical-tiles {
  position: relative;
  z-index: 3;
  display: grid;
  gap: var(--gap-width);
  grid-template: 1fr / repeat(calc(3 * var(--col-count)), 1fr);
}

.enable-shadows #wall-masonry-vertical-tiles {
  box-shadow: 0 tile(.25) tile(.1) rgba(#000, .5);
}

.enable-3d-transformations #wall-masonry-vertical-tiles {
  transform: translateZ(tile(.45));
}

#wall-half-horizontal-tiles {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--gap-width);
  grid-template: 1fr / repeat(calc(2 * var(--col-count)), 1fr);
}

.enable-shadows #wall-half-horizontal-tiles {
  box-shadow: 0 tile(.25) tile(.1) rgba(#000, .5);
}

.enable-3d-transformations #wall-half-horizontal-tiles {
  transform: translateZ(tile(.3));
}

#wall-single-horizontal-tiles {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--gap-width);
  grid-template: 1fr / repeat(var(--col-count), 1fr);
}

.enable-shadows #wall-single-horizontal-tiles {
  box-shadow: 0 tile(.25) tile(.1) rgba(#000, .5);
}

.enable-3d-transformations #wall-single-horizontal-tiles {
  transform: translateZ(tile(.15));
}

#wall-front-tiles {
  position: relative;
  display: grid;
  gap: var(--gap-width);
  grid-template:
    repeat(var(--row-count), 1fr) /
    repeat(var(--col-count), 1fr);
}

.left-shadow {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  box-shadow: inset tile(1.65) 0 tile(.08) rgba(#000, .5);
  transform: translateZ(1px);
}

.enable-shadows .left-shadow {
  display: block;
}

.window {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: totalTile(5);
  height: totalTile(6);
  overflow: hidden;
  background: rgba(darken(desaturate(skyblue, 40%), 60%), .5);
  perspective: 150vmin;

  .left-shadow {
    left: tile(-1.5);
  }
}

.room {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.room-photo {
  position: absolute;
  top: tile(-2);
  left: tile(-3);
  max-width: 300%;
  opacity: 1;
  transform:
    translate(
      calc(var(--camera-x) * -1% * var(--zoom-square)),
      calc(var(--camera-y) * -1% * var(--zoom-square))
    )
    scale( calc( 3 - var(--zoom) ) );
  will-change: transform;
}

.enable-win-reflection .room-photo {
  opacity: calc(var(--zoom) / 2);
  will-change: opacity;
}

.window-reflection-container {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.window-reflection {
  display: none;
  position: absolute;
  top: tile(-8.5);
  right: tile(0);
  max-width: calc(600% - (150% * var(--zoom)));
  mix-blend-mode: overlay;
  transform:
    translate(
      calc(var(--camera-x) * -3% * var(--zoom-square) / 1.5),
      calc(var(--camera-y) * -3% * var(--zoom-square) / 1.5)
    );
  will-change: max-width, transform;
}

.enable-win-reflection .window-reflection {
  display: block;
}

.window-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow:
    inset 0 0 0 tile(.25) #eae4da,
    inset tile(.01) tile(.01) 0 tile(.255) rgba(#000, .5),
    inset 0 0 0 tile(.5) #eae4da,
    inset 0 0 0 tile(.6) darken(desaturate(orange, 55%), 15%);
}

.ventilation-grid {
  position: absolute;
  top: 0;
  right: tile(1.2);
  width: tile(.8);
  height: tile(.8);
  background: #777;

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    background: repeating-linear-gradient(
      to bottom,
      rgba(#000, .8),
      transparent tile(.1),
      transparent tile(.14)
    );
  }
}

.street-signs {
  position: absolute;
  left: tile(.5);
  bottom: tile(1);
  height: tile(.5);
}

.street-sign {
  position: relative;
  padding: tile(.25) tile(.3);
  background: linear-gradient(to bottom, #eae4da, #dad4ca);
  font: normal tile(.4)/tile(.6) 'VenturisSansADFLt-Bold', sans-serif;
  text-transform: uppercase;
  box-shadow: tile(.02) tile(.02) 2px rgba(#000, .5);

  &::before, &::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: tile(.15);
    height: tile(.15);
    background: #333;
    border-radius: 100%;
  }

  &::before {
    left: tile(.01);
  }

  &::after {
    right: tile(.01);
  }

  &.swe {
    letter-spacing: tile(.06);
  }
}

.settings {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font: normal 1rem/1.6 helvetica, sans-serif;

  &.inverted {
    color: white;
  }

  &[open] {
    background: rgba(#000, .9);
    color: white;
  }

  &[open] &-label::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
  }

  &-label {
    display: block;
    width: 28px;
    height: 28px;
    padding: .3rem .5rem;
    user-select: none;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }

  .settings-icon {
    width: 100%;
    height: 100%;
    transform: none;
    transition: transform .3s;
  }

  &[open] .settings-icon {
    animation: spin120 .5s 1 forwards;
  }

  @keyframes spin120 {
    to {
      transform: rotate(120deg);
    }
  }

  &:not([open]) .settings-icon:hover,
  &:not([open]) .settings-label:focus-within .settings-icon {
    transform: rotate(30deg);
  }

  &:not([open]) .settings-label:active .settings-icon {
    transform: rotate(45deg);
  }

  &-list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    width: max-content;
    height: max-content;
    padding: .25rem 0;
    background: rgba(#000, .9);
  }

  &-item label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .25rem .75rem;
    line-height: 1.8;

    &:hover {
      background: rgba(#fff, .1);
    }

    input[type="checkbox"] {
      margin-left: .5rem;
    }
  }
}