/*------ PAGE TRANSITIONS BAR/STAIRS ------*/

.bridge-transition {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  pointer-events: none;
}

.bridge-vertical .bar {
  flex: 1;
  align-self: flex-end;
  width: 20%;
  height: 100%;
  transition: height .6s ease-in-out;
}

.home-page  .bar-1,
.home-page  .bar-2,
.home-page  .bar-3,
.home-page  .bar-4,
.home-page  .bar-5 {
  background: var(--primary-black-dark);
}

.bar-1, .bar-2, .bar-3, .bar-4, .bar-5 {
  background: var(--primary-white);
}

/*------- INTERSECTION OBSERVERS -------*/

.io-float-vertical {
  animation: floatUpDown 2s ease-in-out infinite;
}

@keyframes floatUpDown {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.io-float-horizontal {
  animation: floatLeftRight 2s ease-in-out infinite;
}

@keyframes floatLeftRight {
  0% { transform: translateX(0); }
  50% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}