/* Photo carousel at the top of the home page.
   The photos sit side by side in a row that scrolls left at a constant speed.
   Every photo is the same height and keeps its own shape, so nothing gets cropped.
   js/carousel.js repeats the photos so the row never runs out, and works out
   how far and how fast to scroll once the photos have loaded. */

#carousel__container {
  position: relative;
  overflow: hidden;          /* hide the photos that are off-screen */
  height: 40svh;             /* 40% of the screen height */
  min-height: 300px;
  background: var(--color-accent-dark);  /* shows while photos load */

  --seconds-per-screen: 45s; /* scroll speed: seconds to move one screen width. Bigger = slower */
}

.img__container {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;    /* animate on the graphics chip: smoother, no flicker */
  /* --set-width and the animation length are set by js/carousel.js */
  animation: carousel-scroll 60s linear infinite;
  animation-play-state: paused;  /* held still until js/carousel.js has measured the photos */
}
.img__container.is-moving { animation-play-state: running; }

/* Slide left by exactly one full set of photos, then loop.
   The next set is an identical copy, so the loop is seamless. */
@keyframes carousel-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--set-width, 0px) * -1), 0, 0); }
}

.carousel__img {
  flex: 0 0 auto;
  height: 100%;
  width: auto;               /* width follows the photo's own shape */
}

/* Text on top of the photos. It stays still while the photos slide underneath. */
.carousel__overlay {
  position: absolute;
  inset: 0;                  /* cover the whole carousel */
  display: flex;
  align-items: center;       /* vertical position: flex-start = top, flex-end = bottom */
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);  /* darkens the photos so the text is readable; 0 = off */
  pointer-events: none;
}

.carousel__text {
  margin: 0;
  color: #fff;
  font-family: var(--font-title);
  font-weight: 400;                      /* Cedarville Cursive only comes in regular */
  font-size: clamp(3rem, 5vw, 5rem);  /* min, scales with screen width, max */
  text-align: center;
}

/* Phones: a shorter strip so about 3 tall photos fit across the screen */
@media (max-width: 600px) {
  #carousel__container {
    height: 50vw;            /* bigger number = taller strip and bigger photos */
    min-height: 0;
    --seconds-per-screen: 25s;
  }
}

/* Respect people who turn off animations in their phone/computer settings */
@media (prefers-reduced-motion: reduce) {
  .img__container { animation: none; }
}