/* Cartridges (src/_includes/components/cartridges.njk): a game's editions as cartridges on a
   shelf, the chosen one slotted into a small boxy console. Underneath it is a plain tab list;
   cartridges.js only flips aria-selected and hidden, and everything that moves is CSS. Until the
   script is ready the shelf is hidden and every edition is listed in full. */

.cartridges {
  --cartridge-width: 6.25rem;
  --cartridge-height: 7.5rem;
  --shelf-gap: .9rem;        /* air between a waiting cartridge and the console's slot */
  --slot-depth: 3.5rem;      /* how far the chosen cartridge sinks into the console */
  --console-body: #d8d2d9;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(14rem, .9fr);
  column-gap: 2.5rem;
  margin: 1rem 0 2rem;
}
.cartridges > .eyebrow, .cartridges > h2 { grid-column: 1 / -1; }
.cartridges > h2 { margin-bottom: 1.5rem; }

/* the shelf: cartridges stand on it, just above the console's slot */
.cartridge-shelf {
  grid-column: 1;
  display: none;
  justify-content: center;
  align-items: end;
  gap: 1.25rem;
  height: calc(var(--cartridge-height) + var(--shelf-gap) + .4rem);
  padding-bottom: var(--shelf-gap);
}
.cartridges[data-ready] .cartridge-shelf { display: flex; }

.cartridge {
  position: relative;
  z-index: 0;
  flex: none;
  width: var(--cartridge-width);
  height: var(--cartridge-height);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: transform .32s steps(4, end);
}
/* the body: an ink outline with a cut top right corner, and grip ridges along the top */
.cartridge::before, .cartridge::after { content: ""; position: absolute; pointer-events: none; }
.cartridge::before {
  inset: 0;
  background: var(--ink);
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 0 100%);
}
.cartridge::after {
  inset: 2px;
  background:
    repeating-linear-gradient(to right, var(--line) 0 2px, transparent 2px 6px) .55rem .45rem / calc(100% - 2.4rem) .7rem no-repeat,
    var(--console-body);
  clip-path: polygon(0 0, calc(100% - .9rem) 0, 100% .9rem, 100% 100%, 0 100%);
}
.cartridge-sticker {
  position: absolute;
  z-index: 1;
  inset: 1.6rem .5rem .8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .35rem .4rem;
  border: 2px solid var(--ink);
  border-top: .5rem solid var(--cartridge-accent, var(--trans-blue));
  background: var(--paper);
  text-align: left;
}
.cartridge-name { font-size: .78rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.cartridge-code { color: var(--muted); font-size: .58rem; letter-spacing: .045em; }

.cartridge:hover { transform: translateY(-.3rem); }
.cartridge[aria-selected="true"] { transform: translateY(var(--slot-depth)); cursor: default; }
.cartridge:focus-visible { z-index: 2; outline: 3px solid var(--focus); outline-offset: 4px; }

/* one edition: the console in the shelf's column, its notes and downloads beside it */
.cartridge-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
}
.cartridge-panel[hidden] { display: none; }
.cartridges:not([data-ready]) .cartridge-panel + .cartridge-panel { margin-top: 3rem; }

.console {
  position: relative;
  z-index: 1; /* in front of the shelf, so a slotted cartridge disappears into it */
  margin: 0;
  padding: 1.6rem 1.4rem 1rem 1.9rem;
  border: 2px solid var(--ink);
  border-radius: .5rem .5rem 2.75rem .5rem;
  background: var(--console-body);
}
/* the slot along the top edge, and the power light, lit once the cartridge is in */
.console::before, .console::after { content: ""; position: absolute; }
.console::before {
  top: calc(-.55rem - 2px);
  left: 1rem;
  right: 1rem;
  height: .55rem;
  border-radius: .2rem .2rem 0 0;
  background: var(--ink);
}
.console::after {
  top: 2.4rem;
  left: .6rem;
  width: .5rem;
  height: .5rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--cartridge-accent, var(--lesbian-orange));
  animation: console-power .7s steps(1, end) both;
}
.console-screen {
  padding: .8rem;
  border-radius: .35rem .35rem 1.4rem .35rem;
  background: var(--ink);
}
.console-screen img {
  width: 100%;
  image-rendering: pixelated;
  animation: console-boot .7s steps(5, end) both;
}
.console figcaption { margin-top: .75rem; }

.cartridge-notes h3 { margin: 0 0 .6rem; font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: -.06em; }
.cartridge-notes p:not(.eyebrow):not(.download-status) { max-width: 34ch; }
.cartridge-notes .download-panel { width: 100%; margin: 2rem 0 0; }
.cartridge-notes .download-panel h4 { margin: 0 0 1.5rem; font-size: clamp(1.1rem, 2.4vw, 1.5rem); letter-spacing: -.06em; }

/* shown by signal.js once the edition's release has a web cartridge */
.load-cartridge:not([hidden]) {
  display: block;
  margin-top: 1rem;
  padding: .6rem .9rem;
  border: 2px solid var(--ink);
  background: var(--cartridge-accent, var(--trans-blue));
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.load-cartridge:hover { background: var(--paper); }
.load-cartridge:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* the screen wakes a moment after the cartridge lands: a bright line, then the picture */
@keyframes console-boot {
  0%, 35% { opacity: 0; clip-path: inset(49% 0 49% 0); }
  36% { opacity: 1; clip-path: inset(49% 0 49% 0); filter: brightness(2.4) contrast(.6); }
  70% { clip-path: inset(0); filter: brightness(1.5); }
  100% { opacity: 1; clip-path: inset(0); filter: none; }
}
@keyframes console-power {
  0%, 40% { background: var(--line); }
  41%, 100% { background: var(--cartridge-accent, var(--lesbian-orange)); }
}

@media (max-width: 45rem) {
  .cartridges { --cartridge-width: 4.9rem; --cartridge-height: 6.4rem; --slot-depth: 3rem; grid-template-columns: minmax(0, 1fr); }
  .cartridge-shelf { gap: .6rem; }
  .cartridge-sticker { inset: 1.4rem .35rem .7rem; padding: .3rem .3rem; }
  .cartridge-name { font-size: .66rem; }
  .cartridge-code { font-size: .5rem; }
  .cartridge-notes { margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cartridge { transition: none; }
}