.house {
  height: 225px;
  width: 520px;
}

.house-label {
  text-transform: uppercase;
  font-weight: bold;
  padding-left: calc(20px + 1ch);
  font-size: 25px;
  color: $color-primary;
  margin: 30px 0 5px;
  font-family: Arial Rounded MT Bold, Helvetica Neue, Helvetica, sans serif;
  
  &:before, &:after {
    position: absolute;
    text-align: right;
    left: 0;
    top: 0;
    padding: 0 .5ch;
    will-change: transform;
  }
  
  &:before {
    content: attr(data-prev-rooms);
  }
  
  &:after {
    content: attr(data-rooms);
  }
  
  @for $i from 6 through 3 {
    &[data-rooms="#{$i}"][data-rooms-delta^="-"] {
      &:before {
        animation: prev-label-up-#{$i} $duration $easing both;
      }
      &:after {
        animation: label-up-#{$i} $duration * 2 $easing both;
      }
    }

    &[data-rooms="#{$i}"]:not([data-rooms-delta^="-"]) {
      &:before {
        animation: prev-label-down-#{$i} $duration $delay $easing both;
      }
      &:after {
        animation: label-down-#{$i} $duration * 2 $delay $easing both;
      }
    }

    @keyframes prev-label-up-#{$i} {
      from {
        transform: translateY(0);
        opacity: 1;
      }
      to {
        transform: translateY(-100%) scale(1.5);
        opacity: 0;
      }
    }
    @keyframes prev-label-down-#{$i} {
      from {
        transform: translateY(0);
        opacity: 1;
      }
      to {
        transform: translateY(100%) scale(1.5);
        opacity: 0;
      }
    }

    @keyframes label-up-#{$i} {
      from {
        transform: translateY(100%);
        opacity: 0;
      }
      50% {
        transform: translateY(0) scale(1.5);
        opacity: 1;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    @keyframes label-down-#{$i} {
      from {
        transform: translateY(-100%);
        opacity: 0;
      }
      50% {
        transform: translateY(0) scale(1.5);
        opacity: 1;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
}



.house-wings {
  position: absolute;
  bottom: 0;
  height: 125px;
  
  &:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    border: 5px solid $color-primary;
    box-shadow: inset 0 15px $color-shadow;
  }
  
  &:after {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 100%;
    background-color: $color-primary;
    transform: scaleX(1.2)
  }
  
  > .house-roof {
    height: 65px;
    width: calc(100% + 40px);
    left: -20px;
    border-bottom: 5px solid $color-primary;
    position: absolute;
    bottom: 100%;
    
    &:before, &:after {
      position: absolute;
      height: 100%;
      width: 50%;
      background-color: $color-roof;
      border: 5px solid $color-primary;
      border-bottom: none;
    }
    
    &:before {
      left: 0;
      transform-origin: bottom left;
      transform: skewX(-30deg);
      border-right: none;
    }
    &:after {
      right: 0;
      transform-origin: bottom right;
      transform: skewX(30deg);
      border-left: none;
    }
  }
  
  .house-ledge {
    position: absolute;
    bottom: -15px;
    width: 100%;
    height: 15px;
    border: 5px solid $color-primary;
    background-color: $color-ledge;
  }
}

.house-facade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 15px 0 rgba(darken($color-shadow, 20%), 0.2);
  
  &:before, &:after {
    position: absolute;
    height: 100%;
    width: 50%;
    background-color: #fff;
    top: 0;
    border-top: 5px solid $color-primary;
    box-shadow: inset 0 calc(var(--front-width) / 6) $color-shadow;
  }
  
  &:before {
    left: 0;
    transform-origin: top left;
    transform: skewY(-40deg);
    border-left: 5px solid $color-primary;
  }
  
  &:after {
    right: 0;
    transform-origin: top right;
    transform: skewY(40deg);
    border-right: 5px solid $color-primary;
  }
}

$wing-roof-moves: (
  6: (
    (origin: bottom left, transform: translateY(-10px) rotate(-5deg)),
    (origin: bottom right, transform: translateY(-5px) rotate(2deg)),
  ),
  5: (
    (origin: bottom right, transform: translateY(-20px) rotate(10deg)),
    (origin: bottom left, transform: translateY(-10px) rotate(-2deg)),
  ),
  4: (
    (origin: bottom left, transform: translateY(-15px) rotate(-10deg)),
    (origin: bottom right, transform: translateY(-10px) rotate(2deg)),
  ),
  3: (
    (origin: bottom right, transform: translateY(-20px) rotate(10deg)),
    (origin: bottom left, transform: translateY(-10px) rotate(-2deg)),
  ),
);

$front-roof-moves: (
  6: (
    (origin: bottom right, transform: translateY(-5px) rotate(5deg)),
    (origin: bottom left, transform: translateY(-2px) rotate(-1deg)),
  ),
  5: (
    (origin: bottom left, transform: translateY(-10px) rotate(-5deg)),
    (origin: bottom right, transform: translateY(-5px) rotate(1deg)),
  ),
  4: (
    (origin: bottom right, transform: translateY(-5px) rotate(10deg)),
    (origin: bottom left, transform: translateY(-2px) rotate(-2deg)),
  ),
  3: (
    (origin: bottom right, transform: translateY(-10px) rotate(-5deg)),
    (origin: bottom left, transform: translateY(-5px) rotate(2deg)),
  ),
);

$house-moves: (
  6: (
    (transform: scale(.95, 1.05)),
    (transform: scale(.98, 1.02)),
  ),
  5: (
    (transform: scale(.9, 1.2)),
    (transform: scale(.95, 1.05)),
  ),
  4: (
    (transform: scale(.9, 1.2)),
    (transform: scale(.95, 1.05)),
  ),
  3: (
    (transform: scale(.9, 1.2)),
    (transform: scale(.95, 1.05)),
  ),
);

$facade-moves: (
  6: (
    (transform: scale(.95, 1.05)),
    (transform: scale(.98, 1.02)),
  ),
  5: (
    (transform: scale(.9, 1.05)),
    (transform: scale(.95, 1.02)),
  ),
  4: (
    (transform: scale(.9, 1.05)),
    (transform: scale(.95, 1.02)),
  ),
  3: (
    (transform: scale(.9, 1.05)),
    (transform: scale(.95, 1.02)),
  ),
);

$chimney-moves: (
  6: (
    (transform: rotate(10deg) translateY(-15px)),
    (transform: rotate(-5deg) translateY(-5px)),
  ),
  5: (
    (transform: rotate(-10deg) translateY(-15px)),
    (transform: rotate(5deg) translateY(-5px)),
  ),
  4: (
    (transform: rotate(10deg) translateY(-15px)),
    (transform: rotate(-5deg) translateY(-5px)),
  ),
  3: (
    (transform: rotate(-10deg) translateY(-15px)),
    (transform: rotate(5deg) translateY(-5px)),
  ),
);
    
$move-parts: (
  wing-roof: $wing-roof-moves,
  front-roof: $front-roof-moves,
  house: $house-moves,
  facade: $facade-moves,
  chimney: $chimney-moves,
);

@function either($a, $b) {
  @return if($a, $a, $b);
}

@each $part, $move-config in $move-parts {
  @each $rooms, $moves in $move-config {
    $move-1: nth($moves, 1);
    $move-2: nth($moves, 2);
  @keyframes #{$part}-#{$rooms}-move {
      from {
        transform-origin: either(map-get($move-1, origin), bottom center);
      }
      25% {
        transform: map-get($move-1, transform);
      }
      50% {
        transform-origin: either(map-get($move-1, origin), bottom center);
        transform: none;
      }
      51% {
        transform-origin: either(map-get($move-2, origin), bottom center);
      }
      75% {
        transform-origin: either(map-get($move-2, origin), bottom center);
        transform: map-get($move-2, transform);
      }
      to {
        transform-origin: either(map-get($move-2, origin), bottom center);
        transform: none;
      }
    }
  }
}

@for $i from 6 through 3 {
  [data-rooms="#{$i}"] {
    .house-wings > .house-roof {
      animation: wing-roof-#{$i}-move $duration $delay $easing;
    }
    .house-front > .house-gable {
      animation: front-roof-#{$i}-move $duration $delay $easing;
    }
    .house-wings:before,
    .house-left-wing,
    .house-right-wing {
      animation: house-#{$i}-move $duration $delay $easing;
    }
    .house-facade,
    .house-front .house-window,
    .house-doorway {
      animation: facade-#{$i}-move $duration $delay $easing;
    }
    .house-chimney {
      animation: chimney-#{$i}-move $duration $delay $easing;
    }
  }
}


.house-front {
  position: absolute;
  bottom: 0;
  height: 160px;
  
  > .house-window {
    width: 60px;
    height: 55px;
    position: absolute;
    left: calc(50% - 30px);
    top: -10px;
    
    [data-rooms="4"] &,
    [data-rooms="3"] & {
      border-bottom-left-radius: 50% 40%;
      border-bottom-right-radius: 50% 40%;
      
      &:after {
        display: none;
      }
    }
    
    [data-rooms="4"]:not([data-prev-rooms="3"]) &,
    [data-rooms="3"]:not([data-prev-rooms="4"]) &,
    [data-rooms="5"]:not([data-prev-rooms="6"]) &,
    [data-rooms="6"]:not([data-prev-rooms="5"]) &,
    {
      > .house-sparkle {
        display: block;
      }
    }
    
    > .house-sparkle {
      display: none;
    }
  }
  
  .house-ledge {
    height: 20px;
    width: 20px;
    position: absolute;
    background: #000;
    left: calc(50% - 10px);
    background-color: $color-ledge;
    border: 5px solid $color-primary;
    transform: rotate(-45deg) translate(5px, -5px);
    
    &:before, &:after {
      position: absolute;
      width: calc(var(--front-width) / 1.25);
      height: calc(100% + 10px);
      top: -5px;
      background-color: $color-ledge;
      border: 5px solid $color-primary;
    }
    
    &:before {
      right: 100%;
      border-right: none;
    }
    &:after {
      left: 0;
      transform-origin: left bottom;
      transform: rotate(90deg) translate(-5px, 5px);
      border-left: none;
    }
    
  }
}