:root {
  --progress-height: 100px;
  --sea-height: 52px;
  --surface-offset: 26px;
}

body.has-scroll-progress {
  padding-bottom: var(--progress-height);
}

.scroll-progress {
  position: fixed;
  bottom: -20px;
  left: 0;
  right: 0;
  z-index: 1000002;
  height: var(--progress-height);
  overflow: visible;
  pointer-events: none;
}

.scroll-progress__track {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scroll-progress__sea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: var(--sea-height);
  overflow: visible;
}

.scroll-progress__sea-fill {
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--surface-offset));
  height: 100%;
  width: 0%;
  background-image: url('/images/sea.png');
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 100%;
  will-change: width;
}

.scroll-progress__sailor {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: auto;
  transform: translate(-50%, 0);
  z-index: 2;
  pointer-events: none;
  will-change: left, bottom, transform;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}