/* ═══════════════════════════════════════════════════════════
   HOME — hero, recent rail, pinned tiles, spotlight cards
   ═══════════════════════════════════════════════════════════ */

.view-home{ position:absolute; inset:0; overflow:hidden; }

/* hero copy that sits over the artwork */
.hero{
  position:absolute; left:var(--safe-x); top:4rem; max-width:62rem;
  opacity:0; transform:translateY(1.2rem);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
  pointer-events:none;
}
.hero.show{ opacity:1; transform:none; }
.hero-eyebrow{
  font-size:1.4rem; font-weight:700; letter-spacing:.22rem; text-transform:uppercase;
  color:var(--green-bright); margin-bottom:1rem;
}
.hero-title{ font-size:5.6rem; font-weight:600; line-height:1.04; margin:0 0 1.2rem;
  text-shadow:0 .4rem 3rem rgba(0,0,0,.7); }
.hero-meta{ font-size:1.7rem; color:var(--text-2); display:flex; gap:1.4rem; align-items:center; }
.hero-meta .dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--text-3); }

/* ───────── rails ───────── */
/* the selected game begins at y=640 on a 1920x1080 canvas; the view starts
   at --bar-h, so these offsets are measured from there */
.rail{ position:absolute; left:0; right:0; top:30rem; }
.rail-head{
  display:flex; align-items:baseline; gap:1.4rem; margin:0 0 1.2rem;
}
.rail-title{ font-size:2.2rem; font-weight:600; margin:0; }
.rail-count{ font-size:1.5rem; color:var(--text-3); }

.rail-strip{
  /* tiles hang from a common top edge: the selected one grows a label bar
     downwards, exactly as it does on the console */
  display:flex; align-items:flex-start; gap:1.6rem;
  overflow-x:auto; overflow-y:visible;
  padding:0 var(--safe-x) 4rem;
  scroll-behavior:smooth;
  scrollbar-width:none;
}

/* the big "jump back in" tile */
.tile{
  position:relative; flex:none;
  box-shadow:0 .8rem 2.4rem rgba(0,0,0,.45);
  transition:transform var(--dur-mid) var(--ease-decel),
             box-shadow var(--dur-mid) var(--ease-standard);
}

/* Fluent list reveal: each tile rises and fades on a short stagger,
   indexed by --i so the row resolves left to right */
.view.entering .tile,
.view.entering .card{
  animation:tileRise var(--dur-slow) var(--ease-decel) backwards;
  animation-delay:calc(var(--i, 0) * 28ms);
}
@keyframes tileRise{
  from{ opacity:0; transform:translateY(2.2rem) scale(.96); }
  to{ opacity:1; transform:none; }
}
:root[data-motion="reduced"] .view.entering .tile,
:root[data-motion="reduced"] .view.entering .card{ animation:none; }
.tile[data-focused]{
  transform:scale(1.04);
  box-shadow:0 1.2rem 3.2rem rgba(0,0,0,.62);
  z-index:2;
}
/* the hero tile holds its measured size when focused; the ring carries
   the focus state instead of a scale that would break the row geometry */
.tile-hero[data-focused]{ transform:none; }
.tile-art{ position:absolute; inset:0; }
.tile-art img{ width:100%; height:100%; object-fit:cover; }

/* the art box is fixed; only the selected entry is larger */
.tile{ width:14rem; }
.tile-face{ display:block; width:14rem; height:14rem; position:relative;
  border-radius:var(--tile-r); overflow:hidden; background:var(--panel-2); }
.tile-hero{ width:20rem; }
.tile-hero .tile-face{ width:20rem; height:20rem; }
.tile-sm{ margin-top:6rem; }        /* hang so every cover shares a bottom edge */

/* the label is a bar that opens underneath the art on selection */
.tile-label{
  display:block; height:0; overflow:hidden;
  padding:0; font-size:1.5rem; font-weight:400;
  color:#fff; text-align:left;
  background:rgba(10,12,14,.96);
  white-space:nowrap; text-overflow:ellipsis;
  opacity:0;
  transition:height var(--dur-mid) var(--ease-decel),
             opacity var(--dur) var(--ease-standard),
             padding var(--dur-mid) var(--ease-decel);
}
.tile[data-focused] .tile-label{ height:3.8rem; padding:1.1rem 1rem 0; opacity:1; }

.tile-badge{
  position:absolute; bottom:.6rem; left:.6rem; z-index:4;
  font-size:1rem; font-weight:700; letter-spacing:.07rem; line-height:1;
  padding:.3rem .45rem; border-radius:.25rem;
  background:rgba(0,0,0,.66); color:#fff; text-transform:uppercase;
  backdrop-filter:blur(.4rem);
  animation:badgeIn var(--dur-mid) var(--ease-decel) backwards;
  animation-delay:.12s;
}
@keyframes badgeIn{ from{ opacity:0; transform:translateY(-.3rem); } to{ opacity:1; transform:none; } }
.tile-badge.gp{ background:#107c10; }
.tile-badge.flash{ background:#b5451b; }
.tile-badge.emu{ background:#4b2fa8; }
.tile-pin{
  position:absolute; top:.6rem; right:.6rem; z-index:4;
  width:2rem; height:2rem; border-radius:50%;
  background:rgba(0,0,0,.6); display:grid; place-items:center;
}
.tile-pin svg{ width:1.2rem; height:1.2rem; fill:#fff; }

/* the tall "add / browse" tile */
.tile-add{
  display:grid; place-items:center;
  background:rgba(255,255,255,.06);
  border:.2rem dashed var(--stroke-2);
}
.tile-add svg{ width:4rem; height:4rem; fill:var(--text-2); }

/* ───────── spotlight card row ───────── */
.cards{
  position:absolute; left:var(--safe-x); right:var(--safe-x); top:55rem;  /* y = 890 */
  /* the store tile is near square; the promos take the remaining width */
  display:grid; grid-template-columns:.46fr 1fr 1fr 1fr; gap:2.2rem;
}
.card{
  /* the row starts at y=890 and runs close to the bottom edge, as on
     the console - nothing sits under it */
  position:relative; height:17.5rem; border-radius:var(--card-r); overflow:hidden;
  background:var(--panel-2); text-align:left;
  box-shadow:0 .8rem 2.4rem rgba(0,0,0,.4);
  transition:transform var(--dur-mid) var(--ease-decel),
             box-shadow var(--dur-mid) var(--ease-standard);
}
.card[data-focused]{ transform:scale(1.035); box-shadow:0 1.4rem 3.6rem rgba(0,0,0,.6); z-index:2; }
/* Promo cards are wide, the catalogue ships square art. Rather than pad the
   gap with a gradient, the same artwork fills the card twice: blurred and
   over-scaled underneath, sharp and anchored right on top. The card is then
   entirely real art. */
.card-art{ position:absolute; inset:0; overflow:hidden; }
.card-art .fill{
  position:absolute; inset:-12%;
  width:124%; height:124%;
  object-fit:cover;
  filter:blur(2.4rem) saturate(1.3) brightness(.62);
  transform:scale(1.06);
}
.card-art .sharp{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.card-art::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, transparent 40%, rgba(3,5,7,.88) 100%);
}
.card-mosaic{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); }
.card-mosaic div{ background-size:cover; background-position:center; position:relative; }
.card-mosaic .mosaic-cell{
  background:radial-gradient(120% 100% at 30% 0%,
    hsl(var(--h) 40% 26%), hsl(var(--h) 34% 12%));
}
.card-scrim{ position:absolute; inset:0; z-index:2;
  background:linear-gradient(transparent 38%, rgba(0,0,0,.82)); }
.card-label{
  position:absolute; left:2rem; right:2rem; bottom:1.6rem; z-index:3;
  font-size:2.2rem; font-weight:600; line-height:1.22;
  text-shadow:0 .2rem 1.2rem rgba(0,0,0,.75);
}
.card-label .sub{
  display:block; margin-top:.3rem;
  font-size:1.8rem; font-weight:400; color:rgba(255,255,255,.86);
}

/* the store entry is a flat colour plate rather than key art */
.card-store{
  background:linear-gradient(150deg,#6d49d6,#4a2ea8 60%,#3b2489);
}
.card-store .card-scrim{ background:none; }
.card-store .card-illus{ place-items:start; padding:2rem 0 0 1.8rem; }
.card-store .card-illus svg{ width:4.2rem; height:4.2rem; fill:rgba(255,255,255,.92); }
.card-chip{
  position:absolute; top:1.2rem; left:1.2rem; z-index:3;
  display:flex; align-items:center; gap:.5rem;
  background:rgba(0,0,0,.6); border-radius:.3rem; padding:.35rem .7rem;
  font-size:1.15rem; font-weight:800; letter-spacing:.05rem;
}
.card-chip .mark{ width:1.5rem; height:1.5rem; }
.card-illus{ position:absolute; inset:0; display:grid; place-items:center; }
.card-illus svg{ width:8rem; height:8rem; fill:rgba(255,255,255,.55); }

/* gradient art used when a card has no photo */
.grad-a{ background:linear-gradient(140deg,#0f3a52,#0b1c2b); }
.grad-b{ background:linear-gradient(140deg,#123f1d,#08170d); }
.grad-c{ background:linear-gradient(140deg,#2a1d4e,#120c22); }
.grad-d{ background:linear-gradient(140deg,#4a2318,#1b0d08); }
.grad-e{ background:linear-gradient(140deg,#1c1c1c,#050505); }


/* the row ends with a people tile, as on the console */
.tile-people .tile-face{
  background:linear-gradient(150deg,#2fbf71,#1f9bd0);
  display:grid; place-items:center;
}
.tile-people .tile-face svg{ width:5.4rem; height:5.4rem; fill:rgba(255,255,255,.95); }
.tile-add .tile-face{
  background:rgba(255,255,255,.06);
  border:.2rem dashed var(--stroke-2);
  display:grid; place-items:center;
}
.tile-add .tile-face svg{ width:4rem; height:4rem; fill:var(--text-2); }

/* the row closes with a larger Friends tile, as the reference does */
.tile-wide{ width:17rem; margin-top:3rem; }
.tile-wide .tile-face{ width:17rem; height:17rem; }


/* the console's art reads vivid; tiles and cards carry the same lift as
   the wallpaper so the screen looks like one picture */
.tile-face img.cover,
.card-art img.cover,
.card-mosaic img.cover{ filter:saturate(calc(var(--sat, 1.35) * .82)) contrast(1.03); }