/* Homepage state feedback only. Resting layout, sizes, and colors stay intact. */
#view-home .home-ripple-host {
  overflow: hidden;
}
#view-home .home-primary-btn.home-ripple-host,
#view-home .home-guide-card.home-ripple-host {
  position: relative;
}

#view-home .home-primary-btn,
#view-home .home-guide-card {
  transition-duration: 160ms;
}

#view-home .home-primary-btn:hover,
#view-home .home-guide-card:hover,
#view-home .home-guide-card:focus-visible {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  #view-home .home-primary-btn:hover,
  #view-home .home-guide-card:hover {
    transform: translateY(-2px);
  }
}

#view-home .home-primary-btn:focus-visible,
#view-home .home-guide-card:focus-visible {
  outline: 2px solid var(--accent, var(--primary));
  outline-offset: 3px;
}

/* The mobile strip clips outside outlines at its first and last cover. */
#view-home .home-ranking-card:focus-visible {
  outline: 2px solid var(--accent, var(--primary));
  outline-offset: -3px;
}

#view-home .home-primary-btn.is-home-pressed,
#view-home .home-guide-card.is-home-pressed {
  transform: scale(.985);
  transition-duration: 100ms;
}

@media (hover: none), (pointer: coarse), (pointer: none) {
  #view-home .home-ranking-card:hover,
  #view-home .home-ranking-card:focus-visible {
    transform: translate3d(0, var(--offset, 0px), 0);
  }
  #view-home .home-ranking-card:hover .home-ranking-media,
  #view-home .home-ranking-card:focus-visible .home-ranking-media {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-home .home-primary-btn,
  #view-home .home-guide-card {
    transition: none;
  }
  #view-home .home-primary-btn:is(:hover, :focus-visible, .is-home-pressed),
  #view-home .home-guide-card:is(:hover, :focus-visible, .is-home-pressed) {
    transform: none;
  }
}

/* Expose the existing wall's geometry only during its first pending read. */
#view-home #homeRankingCovers[aria-busy="true"]:not(.has-posters) .home-ranking-wall[hidden] {
  display: block;
  visibility: hidden;
}
#view-home #homeRankingCovers[aria-busy="true"]:not(.has-posters) .home-ranking-empty {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
@media (max-width: 767px) {
  #view-home #homeRankingCovers[aria-busy="true"]:not(.has-posters) .home-ranking-wall[hidden] {
    min-height: calc(130px * 4 / 3 + 22px);
  }
}