/* The floating games: Ridgeback renders that float in the hero and dock into the Library as the page
   scrolls (hero-motion.js), with the lazy 3D scene (cartridges.js) taking over mid-motion. */
.ridgeback-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.ridgeback-ready [data-cart] { visibility: hidden; }
/* While the games are on their way (as posters or in 3D), the Library's own renders wait for them. */
.ridgeback-ready [data-shelf-slot] > .ridgeback-poster, .hero-motion [data-shelf-slot] > .ridgeback-poster { visibility: hidden; }
.ridgeback-poster { display: block; width: 100%; height: 100%; object-fit: contain; }
.ridgeback-back { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
[data-cart]:not([data-face="back"]) > .ridgeback-back, [data-face="back"] > .ridgeback-poster { visibility: hidden; }

/* The layer spans the hero. When the float starts, hero-motion.js fixes it to the screen exactly where it
   already is, at the same size (nothing moves, so no layout shift), and the posters then travel by
   transform alone, in the same screen coordinates as the 3D canvas. */
.cart-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* The posters start dimmed, at the 3D scene's opacity. Their first frame is static CSS (generated block
   at the end), so the page paints them where the float starts. */
[data-cart] { position: absolute; width: max(84px, 10.4vw); height: max(109.2px, 13.52vw); opacity: .42; will-change: transform; }

/* Where each game floats, from the design: around the hero copy on wide screens, measured from the
   hero's top... */
[data-cart="hades"] { left: 3.828vw; top: 59px; }
[data-cart="elden"] { left: 13.55vw; top: 539px; }
[data-cart="hollow"] { left: -2.7vw; top: 489px; }
[data-cart="outer"] { left: 47.578vw; top: 669px; }
[data-cart="celeste"] { left: 92.3vw; top: 439px; }
[data-cart="balatro"] { left: 76.05vw; top: 569px; }
[data-cart="silks"] { left: 88.55vw; top: 75px; }
[data-cart="tunic"] { left: 81.606vw; top: 339px; }
[data-cart="dead"] { left: 8.689vw; top: 305px; }
/* ...and in a row under the buttons on one-column screens, measured from the hero's bottom edge. Four of
   them wait off screen and fly in when the page scrolls. */
@media (max-width: 833px) {
  [data-cart="hades"] { left: 28px; top: calc(100% - 167px); }
  [data-cart="elden"] { left: calc(100% - 128px); top: calc(100% - 161px); }
  [data-cart="hollow"] { left: -41.538vw; top: calc(100% - 191px); }
  [data-cart="outer"] { left: 23.077vw; top: calc(100% - 85px); }
  [data-cart="celeste"] { left: 120vw; top: calc(100% - 201px); }
  [data-cart="balatro"] { left: 57.436vw; top: calc(100% - 87px); }
  [data-cart="silks"] { left: calc(50% - 42px); top: calc(100% - 175px); }
  [data-cart="tunic"] { left: 122.564vw; top: calc(100% - 81px); }
  [data-cart="dead"] { left: -44.103vw; top: calc(100% - 71px); }
}
@media (prefers-reduced-motion: reduce) {
  .ridgeback-canvas { display: none; }
}

/* hero-motion first frame: generated by scripts/hero-first-frame.mjs from hero-motion.js; do not edit by hand. */
[data-cart="hades"] { transform: matrix(0.888, -0.0236, 0.0423, 1.3075, 9.98, 30.68); }
[data-cart="elden"] { transform: matrix(0.9192, 0.3265, -0.0553, 1.0315, 32.37, 12.46); }
[data-cart="hollow"] { transform: matrix(0.8151, 0.1636, -0.0951, 0.7083, 40.64, -20.31); }
[data-cart="outer"] { transform: matrix(1.0058, 0.0857, -0.0934, 1.0395, 31.65, -28.97); }
[data-cart="celeste"] { transform: matrix(0.5438, 0.1483, -0.0007, 0.7501, 8.73, -3.5); }
[data-cart="balatro"] { transform: matrix(0.7396, 0.1911, 0.0838, 0.9648, -18.17, 27.53); }
[data-cart="silks"] { transform: matrix(1.0899, 0.2963, -0.178, 1.1272, -37.48, 27.76); }
[data-cart="tunic"] { transform: matrix(1.0929, -0.1999, 0.2286, 1.0221, -31.71, -3.4); }
[data-cart="dead"] { transform: matrix(0.9419, 0.1275, 0.1334, 1.1435, -13.02, -29.25); }
@media (max-width: 833px) {
  [data-cart="hades"] { transform: matrix(0.888, -0.0236, 0.0423, 1.3075, 5.59, 15.38); }
  [data-cart="elden"] { transform: matrix(0.9192, 0.3265, -0.0553, 1.0315, 16.64, 6.22); }
  [data-cart="hollow"] { transform: matrix(0.8151, 0.1636, -0.0951, 0.7083, 20.5, -10.21); }
  [data-cart="outer"] { transform: matrix(1.0058, 0.0857, -0.0934, 1.0395, 15.79, -14.49); }
  [data-cart="celeste"] { transform: matrix(0.5438, 0.1483, -0.0007, 0.7501, 4.21, -1.66); }
  [data-cart="balatro"] { transform: matrix(0.7396, 0.1911, 0.0838, 0.9648, -9.27, 13.93); }
  [data-cart="silks"] { transform: matrix(1.0899, 0.2963, -0.178, 1.1272, -18.94, 14); }
  [data-cart="tunic"] { transform: matrix(1.0929, -0.1999, 0.2286, 1.0221, -15.55, -1.73); }
  [data-cart="dead"] { transform: matrix(0.9419, 0.1275, 0.1334, 1.1435, -6, -14.68); }
}
/* end hero-motion first frame */