/* ═══════════════════════════════════════════════════
   GAME TILE SHINE (::after) + HOVER OUTLINE (::before, further down)
   Hover a game for a moment and a soft diagonal band of light sweeps across
   the art. The delay matches the tile's lift, so the sweep runs as the tile
   settles instead of halfway up, and skimming the cursor across a row doesn't
   make every tile flash; only the one you settle on shines.
   Mouse/trackpad only; skipped for reduced-motion users.

   This file only adds the shine/outline/hover-shadow layer. Each tile's own
   base rules (size, lift, transition) live in its page's stylesheet.
   Motion tokens are read with fallbacks because frame.css may not define the
   hover scale yet.
   ═══════════════════════════════════════════════════ */

.game-card,
.slot-card,
.search-modal-game-card,
.fav-card__link,
.related-originals__img-wrap,
.rw-card__thumb,
.sg-suggested-card,
.sg-m-suggested-card,
.rp-card__link,
.originals-index-card {
  position: relative;
}

.game-card::after,
.slot-card::after,
.search-modal-game-card::after,
.fav-card__link::after,
.related-originals__img-wrap::after,
.rw-card__thumb::after,
.sg-suggested-card::after,
.sg-m-suggested-card::after,
.rp-card__link::after,
.originals-index-card::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 45%;
  z-index: 3;
  pointer-events: none;
  /* glossy reflection: soft shoulders, bright narrow core */
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 35%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.15) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  /* parked just off the left edge, slanted like a reflection */
  transform: translateX(-200%) skewX(-20deg);
  opacity: 0;
}

/* The suggested-games card on narrow game pages is a column (art + name) with
   no clipping box of its own; the art carries the radius. Its sweep is
   painted inside an art-sized layer instead (background-position, so it is
   clipped to that layer and never spills onto the neighbouring cards). */
.sg-m-suggested-card::after {
  top: 0;
  bottom: auto;
  right: 0;
  width: auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.15) 42%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.15) 58%,
    rgba(255, 255, 255, 0) 70%
  ) no-repeat;
  background-size: 250% 100%;
  background-position: 130% 0;
  transform: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .game-card:hover::after,
  .slot-card:hover::after,
  .search-modal-game-card:hover::after,
  .fav-card__link:hover::after,
  .related-originals__img-wrap:hover::after,
  .rw-card:hover .rw-card__thumb::after,
  .sg-suggested-card:hover::after,
  .rp-card__link:hover::after,
  .originals-index-card:hover::after {
    animation: game-shine 0.8s cubic-bezier(0.3, 0.6, 0.2, 1) 0.22s forwards;
  }
  .sg-m-suggested-card:hover::after {
    animation: game-shine-clipped 0.8s cubic-bezier(0.3, 0.6, 0.2, 1) 0.22s forwards;
  }
}

@keyframes game-shine {
  0%   { transform: translateX(-200%) skewX(-20deg); opacity: 1; }
  100% { transform: translateX(300%) skewX(-20deg);  opacity: 1; }
}
@keyframes game-shine-clipped {
  0%   { background-position: 130% 0; opacity: 1; }
  100% { background-position: -30% 0; opacity: 1; }
}

/* ═══════════════════════════════════════════════════
   GAME TILE HOVER OUTLINE + DEPTH
   A thin light-blue edge just inside the tile (::before, inside the tile so
   the tile's overflow:hidden doesn't cut it), plus a deeper drop shadow, a
   faint outer ring and a soft glow on the tile itself, so a hovered tile
   reads as lifted off the page. The same layer marks keyboard focus
   (:focus-visible) on every device; hover is mouse/trackpad only.
   ═══════════════════════════════════════════════════ */
.game-card::before,
.slot-card::before,
.search-modal-game-card::before,
.fav-card__link::before,
.related-originals__img-wrap::before,
.sg-suggested-card::before,
.sg-m-suggested-card::before,
.rp-card__link::before,
.originals-index-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    var(--ring-tile-inset, inset 0 0 0 1.5px rgba(143, 214, 255, 0.85)),
    inset 0 0 10px rgba(70, 160, 255, 0.14);
  opacity: 0;
  transition: opacity var(--dur-hover-out, 0.22s) var(--ease-hover, cubic-bezier(0.33, 1, 0.68, 1));
}
/* art-sized outline for the column-style suggested card (see the sweep above) */
.sg-m-suggested-card::before {
  inset: 0 0 auto 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
}

.game-card:focus-visible::before,
.slot-card:focus-visible::before,
.search-modal-game-card:focus-visible::before,
.fav-card__link:focus-visible::before,
.related-originals__img-wrap:focus-visible::before,
.sg-suggested-card:focus-visible::before,
.sg-m-suggested-card:focus-visible::before,
.rp-card__link:focus-visible::before,
.originals-index-card:focus-visible::before {
  opacity: 1;
}

/* Keyboard focus: the glow ring replaces the default outline. */
.game-card:focus-visible,
.slot-card:focus-visible,
.search-modal-game-card:focus-visible,
.fav-card__link:focus-visible,
.related-originals__img-wrap:focus-visible,
.sg-suggested-card:focus-visible,
.rp-card__link:focus-visible,
.originals-index-card:focus-visible,
.sg-m-suggested-card:focus-visible img {
  outline: none;
  box-shadow:
    var(--shadow-tile-hover, 0 14px 28px -10px rgba(0, 0, 0, 0.6)),
    var(--ring-tile-hover, 0 0 0 1px rgba(143, 214, 255, 0.35)),
    var(--glow-tile-hover, 0 0 16px rgba(80, 170, 255, 0.18));
}
.sg-m-suggested-card:focus-visible { outline: none; }

@media (hover: hover) and (pointer: fine) {
  .game-card:hover::before,
  .slot-card:hover::before,
  .search-modal-game-card:hover::before,
  .fav-card__link:hover::before,
  .related-originals__img-wrap:hover::before,
  .sg-suggested-card:hover::before,
  .sg-m-suggested-card:hover::before,
  .rp-card__link:hover::before,
  .originals-index-card:hover::before {
    opacity: 1;
    transition-duration: var(--dur-hover-in, 0.38s);
  }

  .game-card:hover,
  .slot-card:hover,
  .search-modal-game-card:hover,
  .fav-card__link:hover,
  .related-originals__img-wrap:hover,
  .sg-suggested-card:hover,
  .rp-card__link:hover,
  .originals-index-card:hover,
  .sg-m-suggested-card:hover img {
    box-shadow:
      var(--shadow-tile-hover, 0 14px 28px -10px rgba(0, 0, 0, 0.6)),
      var(--ring-tile-hover, 0 0 0 1px rgba(143, 214, 255, 0.35)),
      var(--glow-tile-hover, 0 0 16px rgba(80, 170, 255, 0.18));
  }
}

/* ═══════════════════════════════════════════════════
   LOOK-ONLY TILES (.lobby-tile--display: the retired Crash thumbnail and the
   "Soon" tiles of games we don't carry yet). They are pictures, not buttons:
   no shine sweep, no outline, no lift, no glow, no press, no brighter art.
   Kept last in this file so it wins over the rules above at equal weight.
   ═══════════════════════════════════════════════════ */
.lobby-tile.lobby-tile--display::before,
.lobby-tile.lobby-tile--display::after {
  content: none;
}
.lobby-tile.lobby-tile--display,
.lobby-tile.lobby-tile--display:hover,
.lobby-tile.lobby-tile--display:active {
  transform: none;
  box-shadow: var(--shadow-md);
}
.lobby-tile.lobby-tile--display:hover .card-img-fade {
  filter: none;
}