#panel-2 {
  background: linear-gradient(rgba(255, 255, 255, 0) 20%, white 60%);
}

#panel-4 {
  padding-bottom: 24%;
}

.bird {
  position: absolute;
  top: 61.5%;
  left: 1%;
  width: 45%;
  transform: translate(-20%, -30%) scale(0.1);
  transition: 0.5s 0.2s ease all;
}

.sticky {
  position: sticky;
  top: 20px;
}

.no-click {
  position: relative;
  pointer-events: none;
  z-index: 6;
}

.object--balloon-first {
  top: 37%;
  right: 0%;
  width: 34%;
  z-index: 7;
}
.object--balloon-first:before {
  background-image: url(../assets/mouse/web/mouse-6-right-glo.png);
}
.object--balloon-first[data-clicked='true'] > img,
.object--balloon-second[data-clicked='true'] > img,
.object--balloon-third[data-clicked='true'] > img {
  opacity: 0;
}
.object--balloon-first:after {
  background-image: url(../assets/mouse/web/mouse-6-right-pop.png);
}
.object--balloon-second {
  right: 0%;
  width: 30%;
  top: 0%;
  z-index: 5;
}
.object--balloon-second:before {
  background-image: url(../assets/mouse/web/mouse-6-middle-glo.png);
}
.object--balloon-second:after {
  background-image: url(../assets/mouse/web/mouse-6-middle-pop.png);
}
.object--balloon-third {
  left: 0%;
  width: 30%;
  top: 0%;
  z-index: 5;
}
.object--balloon-third:before {
  background-image: url(../assets/mouse/web/mouse-6-left-glo.png);
}
.object--balloon-third:after {
  background-image: url(../assets/mouse/web/mouse-6-left-pop.png);
}

.mouse--right,
.mouse--left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
.object--balloon-first[data-clicked='true'] ~ .mouse--middle,
.object--balloon-second[data-clicked='true'] ~ .mouse--middle,
.object--balloon-third[data-clicked='true'] ~ .mouse--middle {
  opacity: 0;
}
.object--balloon-first[data-clicked='true']
  + .object--balloon-second[data-clicked='false']
  + .object--balloon-third[data-clicked='false']
  ~ .mouse--right,
.object--balloon-first[data-clicked='false']
  + .object--balloon-second[data-clicked='true']
  + .object--balloon-third[data-clicked='false']
  ~ .mouse--right,
.object--balloon-first[data-clicked='true']
  + .object--balloon-second[data-clicked='true']
  + .object--balloon-third[data-clicked='false']
  ~ .mouse--right,
.object--balloon-third[data-clicked='true'] ~ .mouse--left {
  opacity: 1;
}

#panel-9 {
  height: 200vh;
  background-image: url(../assets/mouse/web/mouse-clouds.jpg);
  background-size: 100% auto;
  background-position: center top;
  overflow: visible;
}

.mouse--falling {
  display: block;
  width: 79%;
  margin: 0 auto 12% auto;
  z-index: 1;
}

.hand__container {
  overflow-x: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.hand {
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translate(100%, 0);
  transition: 1s 0.5s ease all;
}

.hand--front {
  position: absolute;
  z-index: 2;
}

#panel-10 {
  height: 70vh;
}