/* Genesis Properties — tenant logo band.
   A continuous rolling belt, not a carousel. Two identical copies of the list
   sit back to back; the track slides exactly one copy's width and restarts,
   so the loop has no snap or gap.
   Scoped to .tenants — nothing here can reach the rest of the page. */

.tenants {
  background: var(--bg, #070808);
  border-block: 1px solid var(--hair, rgba(236, 237, 237, 0.12));
  padding-block: 56px;
  overflow: hidden;
}

.tenants__eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gp-lite, #7fc39a);
  text-align: center;
  margin: 0;
}

.tenants__rule {
  display: block;
  width: 44px;
  height: 2px;
  background: var(--gp, #3f8f63);
  margin: 16px auto 34px;
}

.tenants__viewport {
  position: relative;
  overflow: hidden;
  /* dissolve at the edges instead of chopping a logo in half */
  -webkit-mask-image: linear-gradient(
    to right, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%
  );
  mask-image: linear-gradient(
    to right, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%
  );
}

.tenants__track {
  display: flex;
  width: max-content;
  animation: tenants-roll 44s linear infinite;
  will-change: transform;
}

.tenants:hover .tenants__track,
.tenants:focus-within .tenants__track {
  animation-play-state: paused;
}

@keyframes tenants-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Each copy carries its own trailing gap, so half the track is exactly one
   copy — that is what makes the seam invisible. */
.tenants__list {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
  list-style: none;
  margin: 0;
}

.tenants__list > li {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.tenants__list img {
  display: block;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.tenants__list li:hover img {
  opacity: 1;
}

/* Optical sizing: cap by height, per logo. A wordmark and a badge at the same
   height do not read as the same size, so each gets its own. */
.tenants img[data-logo="food-lion"]       { height: 34px; }
.tenants img[data-logo="jersey-mikes"]    { height: 34px; }
.tenants img[data-logo="chick-fil-a"]     { height: 31px; }
.tenants img[data-logo="planet-fitness"]  { height: 31px; }
.tenants img[data-logo="workout-anytime"] { height: 29px; }
.tenants img[data-logo="walmart"]         { height: 27px; }
.tenants img[data-logo="lowes"]           { height: 27px; }
.tenants img[data-logo="five-below"]      { height: 21px; }

@media (max-width: 700px) {
  .tenants { padding-block: 44px; }
  .tenants__list { gap: 40px; padding-right: 40px; }
  .tenants__list img { height: 26px !important; }
  .tenants img[data-logo="food-lion"],
  .tenants img[data-logo="jersey-mikes"] { height: 30px !important; }
}

/* Reduced motion: stop the belt, wrap into a static centered row. */
@media (prefers-reduced-motion: reduce) {
  .tenants__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .tenants__track {
    animation: none;
    width: auto;
    justify-content: center;
  }
  .tenants__track .tenants__list:last-child { display: none; }
  .tenants__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding-right: 0;
  }
}