/* Image-based Wedding Scrollbar */
body { 
  scrollbar-width: none; 
  padding-bottom: 90px;
}
body::-webkit-scrollbar { display: none; }

/* Bottom scrollbar container */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.9), transparent);
}

/* Track (grass background) */
.rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 39px; /* Center in 90px height */
}

.track {
  height: 12px;
  margin: 0 25px;
  background: url("/images/scroll/grass.png") repeat-x center;
  background-size: 80px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

/* Characters */
.runner {
  position: absolute;
  bottom: 32px; /* Slightly above track */
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.4));
}

.runner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bride {
  left: 25px;
  z-index: 10000;
  transition: left 0.1s ease;
}

.groom {
  right: 25px;
  z-index: 9999;
}