/* sides.css — the two sides (Projects and Journey) that slide sideways */

.sides {
  position: relative;
  overflow-x: clip;
  touch-action: pan-y pinch-zoom;
}
.side {
  width: 100%;
  background: var(--bg);
  will-change: transform;
}
.side__inner { padding-bottom: var(--space-8); }

/* The side that isn't showing is parked out of the way */
.side.is-parked {
  position: absolute; top: 0; left: 0;
  height: 0; overflow: hidden;
  visibility: hidden;
}
/* While sliding, it shows exactly the part of the page it will land on */
.side.is-floating {
  position: absolute; top: 0; left: 0;
  overflow: hidden;
  z-index: 5;
  visibility: visible;
}