/* =============================================================================
   93-discover-rail-view-all.css
   v16.047 - END-OF-RAIL "View all" TILE for the Discover category rails.

   WHAT THIS IS
   The last item in every category rail is a lavender chevron with a "View all"
   label under it. Scroll a rail to its end and the tile is what you land on;
   tapping it does exactly what tapping that rail's category header does -
   js/89-discover-rail-view-all.js forwards the activation to the header itself,
   so routing keeps ONE owner (initDiscoverCategoryTitleLinks in
   js/11c-discover-category-browse.js) instead of a second copy that could drift.

   WIDTH / ALIGNMENT
   The tile reuses the rail card's own flex basis, verbatim from the rail card
   rule in css/14-live-update-discover-controls.css (~line 1725):
       flex: 0 0 min(calc((100% - 20.4px) / 3), 168px)
   Matching the card width is what lets the inner box use the POSTER's aspect
   ratio (2/3, and 12/17 in Games) and land the chevron dead-centre on the
   poster band, with no magic offsets to re-tune per device. It holds from
   375pt through 440pt because the formula is the cards' own.

   SCOPING
   `.discover-rail-viewall` is created by js/89 and by nothing else, and js/89
   only ever appends it inside a rail - so the class alone is the scope. No
   three-hub selector triple is repeated here; the JS owns placement, the CSS
   owns appearance.

   The tile is deliberately NOT a `.discover-card`: the rail's nine-card cap
   (`> .discover-card:nth-child(n+10) { display: none }`) must neither count it
   nor hide it.

   MOTION
   Opacity + transform only, so the reveal composites on the GPU and holds
   120Hz. No `will-change` - a persistent layer on every rail would cost more
   phone memory than the 300ms transition saves.
   ============================================================================= */

.discover-rail-viewall {
  flex: 0 0 min(calc((100% - 20.4px) / 3), 168px);
  max-width: min(calc((100% - 20.4px) / 3), 168px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: #c4b5fd;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  transform: translate3d(9px, 0, 0);
  transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Toggled by the per-rail IntersectionObserver in js/89 - the tile animates in
   as it scrolls into the rail, and back out when it leaves, so reaching the end
   of the rail always feels like arriving at something. */
.discover-rail-viewall.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Same box as the card's poster, so the chevron centres on the posters rather
   than on the taller card (poster + title + meta). */
.discover-rail-viewall-inner {
  width: 100%;
  aspect-ratio: 2 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

/* Games posters are 12/17, not 2/3 (see the games poster rule in
   css/14-live-update-discover-controls.css) - match it so the chevron stays on
   the poster centre line in the Gaming hub too. */
#games-discover-view .discover-rail-viewall-inner {
  aspect-ratio: 12 / 17;
}

.discover-rail-viewall-chevron {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(196, 181, 253, 0.30);
  background: rgba(196, 181, 253, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, border-color 0.2s ease;
}

.discover-rail-viewall-chevron svg {
  width: 20px;
  height: 20px;
  display: block;
  transform: translateX(1px); /* optical centring - the glyph's mass sits left */
}

.discover-rail-viewall-label {
  font-size: 12.6px;
  font-weight: 400;
  letter-spacing: 0.00em;
  line-height: 1.2;
  color: #c4b5fd;
  text-align: center;
}

.discover-rail-viewall:active .discover-rail-viewall-chevron {
  transform: scale(0.94);
  background: rgba(196, 181, 253, 0.17);
  border-color: rgba(196, 181, 253, 0.44);
}

@media (hover: hover) and (pointer: fine) {
  .discover-rail-viewall:hover .discover-rail-viewall-chevron {
    background: rgba(196, 181, 253, 0.16);
    border-color: rgba(196, 181, 253, 0.42);
  }
  .discover-rail-viewall:hover .discover-rail-viewall-label {
    color: #d8ccff;
  }
}

.discover-rail-viewall:focus-visible .discover-rail-viewall-chevron {
  outline: 2px solid rgba(196, 181, 253, 0.75);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .discover-rail-viewall {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .discover-rail-viewall-chevron {
    transition: none;
  }
}