/* THE CARTRIDGE, the Power-Up item, in retro mode on the home page and on
   /power-up/. scripts/cartridge.mjs draws it into each page (npm run cart);
   this file colours it and moves it. It pops in the way an item comes out of
   a chest, then floats: up one of its own pixels and back, with the floor
   shadow narrowing under it. A band of light sweeps the shell every few
   seconds and a twinkle catches at the top corner as it leaves; two more
   twinkle on their own beats. Every move is a hard frame. It carries .g-only,
   so modern mode hides it. The page sets --u, one cartridge pixel. */
.cart {
  --shell: color-mix(in srgb, var(--ink) 18%, var(--paper));
  --shell-lit: var(--paper);
  --shell-shade: color-mix(in srgb, var(--ink) 40%, var(--paper));
  width: calc(var(--u, 4px) * 41);
  height: calc(var(--u, 4px) * 40);
  animation: cart-pop 480ms both;
}
/* The shell's tints come from the ink, lightest where the light hits, so on a
   dark paper they run the other way. */
@media (prefers-color-scheme: dark) {
  .cart {
    --shell: color-mix(in srgb, var(--ink) 30%, var(--paper));
    --shell-lit: color-mix(in srgb, var(--ink) 50%, var(--paper));
    --shell-shade: color-mix(in srgb, var(--ink) 15%, var(--paper));
  }
}
:root[data-theme='ff'] .cart {
  --shell: color-mix(in srgb, var(--ink) 30%, var(--paper));
  --shell-lit: color-mix(in srgb, var(--ink) 50%, var(--paper));
  --shell-shade: color-mix(in srgb, var(--ink) 15%, var(--paper));
}
.cart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cart .k { fill: var(--ink); }
.cart .b { fill: var(--shell); }
.cart .h { fill: var(--shell-lit); }
.cart .d { fill: var(--shell-shade); }
.cart .l { fill: var(--accent); }
.cart .p { fill: var(--on-accent); }
.cart .glint { fill: #ffffff; opacity: 0.85; animation: cart-glint 3.6s infinite; }
.cart .floor { fill: var(--shell-shade); }
.cart .lift { animation: cart-lift 1.4s steps(1, end) infinite; }
.cart .floor.wide { animation: cart-down 1.4s steps(1, end) infinite; }
.cart .floor.narrow { animation: cart-up 1.4s steps(1, end) infinite; }
.cart .star path { fill: var(--accent); opacity: 0; animation: 3.6s step-end infinite; }
.cart .star .f1 { animation-name: star-f1; }
.cart .star .f2 { animation-name: star-f2; }
.cart .star .f3 { animation-name: star-f3; }
.cart .s2 path { animation-delay: -1.3s; }
.cart .s3 path { animation-delay: -2.5s; }

/* Hidden until it starts (a page may hold it back while the rest lands), then
   small, large, settled, a hard frame each. */
@keyframes cart-pop {
  0% { opacity: 0; transform: scale(0.4); animation-timing-function: step-end; }
  25% { opacity: 1; transform: scale(0.4); animation-timing-function: step-end; }
  50% { opacity: 1; transform: scale(1.2); animation-timing-function: step-end; }
  75%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes cart-lift { 50% { transform: translateY(-1px); } }
@keyframes cart-up { 0% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes cart-down { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* Sixty-three units in twenty-one steps of three, then a rest; the band starts
   and ends off the shell, so the jump back is never seen. */
@keyframes cart-glint {
  0% { transform: translateX(0); animation-timing-function: steps(21, end); }
  16%, 100% { transform: translateX(63px); }
}
/* A twinkle grows dot, cross, long cross, cross, dot, about 90ms a frame. */
@keyframes star-f1 { 0% { opacity: 0; } 16% { opacity: 1; } 18.5% { opacity: 0; } 26% { opacity: 1; } 28.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes star-f2 { 0% { opacity: 0; } 18.5% { opacity: 1; } 21% { opacity: 0; } 23.5% { opacity: 1; } 26% { opacity: 0; } 100% { opacity: 0; } }
@keyframes star-f3 { 0% { opacity: 0; } 21% { opacity: 1; } 23.5% { opacity: 0; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cart, .cart * { animation: none !important; }
  .cart .glint, .cart .floor.narrow { opacity: 0; }
  .cart .s1 .f3 { opacity: 1; }
}