/* ===========================================================================
   SweatTag landing, option B: centered hero over a scrolling athlete gallery
   with the profile phone in the middle. Layered on styles.css, so every
   color, space, radius, type size and motion value comes from its tokens.
   =========================================================================== */

.hero--gallery {
  padding-top: 168px;
}

.hero--gallery .hero-copy {
  gap: var(--space-5);
}

.hero--gallery .display {
  max-width: none;
}

@media (max-width: 560px) {
  .hero--gallery {
    padding-top: 128px;
  }
}

/* ---------- gallery -------------------------------------------------------- */
.gallery {
  --tile-w: 260px;
  --tile-gap: var(--space-4);
  position: relative;
  margin-top: var(--space-11);
  padding-block: var(--space-12);
}

.gallery-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* The list holds the tiles twice; moving it half its width (plus half a gap)
   lands the second copy exactly where the first started, so the loop is seamless. */
.gallery-track {
  display: flex;
  gap: var(--tile-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: gallery-scroll 70s linear infinite;
}

.gallery-tile {
  flex: none;
  width: var(--tile-w);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--radius-300);
  background: var(--bg-sunken);
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes gallery-scroll {
  to {
    transform: translateX(calc(-50% - var(--tile-gap) / 2));
  }
}

/* ---------- phone over the gallery ---------------------------------------- */
.gallery-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 280px;
  margin: 0;
  transform: translate(-50%, -50%);
}

.gallery-phone .phone-screen {
  height: 560px;
}

/* option-b.js swaps the image to the athlete behind the phone. */
.gallery-phone-cover {
  background: url(img/tiles/football.jpg) center 25% / cover;
}

/* Headshot covers the initials, which stay underneath as a fallback.
   The rating badge sits on top of both. */
.ph-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.ph-ovr {
  z-index: 1;
}

.ph-body.is-swapping {
  animation: ph-swap var(--duration-slow) var(--easing-entrance);
}

@keyframes ph-swap {
  from {
    opacity: 0.35;
    transform: translateY(6px);
  }
}

/* ---------- one-screen fit on desktop ------------------------------------ */
/* The hero is exactly one viewport tall: the copy takes what it needs and the
   gallery fills the rest. option-b.js sets --tile-h and --phone-scale from the
   gallery's measured height. */
@media (min-width: 900px) and (min-height: 600px) {
  .hero--gallery {
    display: flex;
    flex-direction: column;
    height: 100svh;
    padding-top: var(--space-12);
  }

  .hero--gallery .hero-copy {
    flex: none;
    gap: var(--space-4);
  }

  .hero--gallery .display {
    font-size: min(var(--text-display-1), 6.5vw, 11svh);
  }

  .hero--gallery .lede {
    max-width: 720px;
  }

  .gallery {
    display: grid;
    flex: 1;
    align-items: center;
    min-height: 0;
    margin-top: var(--space-6);
    padding-block: 0;
  }

  .gallery-tile {
    width: auto;
    height: var(--tile-h, 360px);
  }

  .gallery-phone {
    transform: translate(-50%, -50%) scale(var(--phone-scale, 1));
  }
}

@media (max-width: 720px) {
  .gallery {
    --tile-w: 180px;
    --tile-gap: var(--space-3);
    margin-top: var(--space-9);
    padding-block: var(--space-11);
  }

  .gallery-phone {
    transform: translate(-50%, -50%) scale(0.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track {
    animation: none;
  }
}