/* 39 · the loadout rack (module.rack) as a shop (Round 8): nine artifacts under the money stripe, three by three, each
   drawn in the house pen with its name, one line of what it gives, and its door (the Button type's --card). No counts
   and no progress. The visitor's own play shows only as a quiet state: earned by play is a soft glow of the shape's gem
   round the artifact; bought fills it. House colours only (settings 4): the gem in view (--pc), the rose, the caption
   inks. */

.rw-rack{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.rw-rack__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rw-rack__tile{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  border-radius:12px;padding:10px 8px;border:1px solid color-mix(in srgb,var(--rw-caption-ink) 22%,transparent);
  background:color-mix(in srgb,var(--rw-item-bg) 70%,transparent);color:var(--rw-caption-ink);
  transition:border-color .4s,box-shadow .6s var(--e)}
.rw-rack__art{width:52px;height:52px;display:block;overflow:visible}
.rw-rack__name{font-family:var(--f-display);font-size:14px;line-height:1.15;color:var(--rw-title-ink)}
.rw-rack__what{font-size:11.5px;line-height:1.3;min-height:2.6em}
.rw-rack__door{--btn-pad-y:6px;--btn-pad-x:10px;--btn-size:12px;margin-top:auto;max-width:100%;white-space:normal;text-align:center}

/* the artifact's pen, hi-fi on a 64-unit sheet (module.rack): the house pen's primitives, with the gem in view (--pc)
   blended into the rose on every lit face; one shared set of gradients (rw-rack__defs) whose stops take their colours
   here, so the blend follows the gem as the visitor changes it */
.rw-rack__defs{position:absolute;width:0;height:0;overflow:hidden}
.rw-rack__s0{stop-color:color-mix(in oklab,var(--pc,var(--rose)) 30%,#FFF8F4)}
.rw-rack__s1{stop-color:color-mix(in oklab,var(--pc,var(--rose)) 62%,var(--rose))}
.rw-rack__s2{stop-color:color-mix(in oklab,var(--rose) 70%,#1A0B14)}
.rw-rack__s3{stop-color:color-mix(in oklab,var(--pc,var(--rose)) 45%,#2A1020)}
.rw-rack__s4{stop-color:color-mix(in oklab,var(--rose) 40%,#140810)}
.rw-rack__s5{stop-color:color-mix(in oklab,var(--pc,var(--rose)) 70%,#FFF);stop-opacity:.85}
.rw-rack__s6{stop-color:var(--pc,var(--rose));stop-opacity:.3}
.rw-rack__s7{stop-color:var(--rose);stop-opacity:0}
.rw-rack__ink{fill:none;stroke:var(--rw-title-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rw-rack__ink--dash{stroke-dasharray:2.5 3.5;opacity:.7}
.rw-rack__fine{fill:none;stroke:var(--rw-title-ink);stroke-width:.9;stroke-linecap:round;opacity:.5}
.rw-rack__lit{fill:url(#rw-rack-lit);stroke:var(--rw-title-ink);stroke-width:1.6;stroke-linejoin:round}
.rw-rack__shade{fill:url(#rw-rack-shade);stroke:var(--rw-title-ink);stroke-width:1.6;stroke-linejoin:round}
.rw-rack__aura{fill:url(#rw-rack-glow)}
.rw-rack__glint{fill:none;stroke:#FFFDF8;stroke-width:2.2;stroke-linecap:round;opacity:.9}
.rw-rack__cast{fill:var(--rw-title-ink);fill-opacity:.12}
.rw-rack__solid{fill:var(--rw-title-ink)}
.rw-rack__gem{fill:var(--pc,var(--rose))}
.rw-rack__fx{fill:none;stroke:var(--pc,var(--rose));stroke-width:1.5;stroke-linecap:round;stroke-dasharray:2.5 3.5}
.rw-rack__band{fill:none;stroke:var(--rw-title-ink);stroke-width:7}
.rw-rack__band-lit{fill:none;stroke:url(#rw-rack-lit);stroke-width:4.6}
.rw-rack__glass{fill:color-mix(in srgb,var(--rw-item-bg) 50%,#FFFDF8);fill-opacity:.55}
.rw-rack__brew{fill:url(#rw-rack-lit)}
.rw-rack__steam{fill:none;stroke:var(--pc,var(--rose));stroke-width:1.4;stroke-linecap:round}
.rw-rack__glow{fill:color-mix(in srgb,var(--pc,var(--rose)) 14%,transparent)}

/* the motions: one per artifact, small at rest; the hand widens it (--rw-rack-amp eases in) */
@property --rw-rack-amp{syntax:"<number>";inherits:true;initial-value:1}
.rw-rack__tile{--rw-rack-amp:1;transition:border-color .4s,box-shadow .6s var(--e),--rw-rack-amp .7s cubic-bezier(.2,.7,.2,1)}
.rw-rack__tile:hover,.rw-rack__tile:focus-within{--rw-rack-amp:3.2}
.rw-rack-m{transform-box:fill-box}
.rw-rack-sway{transform-box:view-box;animation:rw-rack-sway 5s ease-in-out infinite}
.rw-rack-base{transform-box:view-box;animation:rw-rack-sway 6s ease-in-out infinite}
.rw-rack-bob{animation:rw-rack-bob 4.4s ease-in-out infinite}
.rw-rack-spin{transform-box:view-box;animation:rw-rack-spin 24s linear infinite}
.rw-rack-pulse{transform-origin:50% 50%;animation:rw-rack-pulse 3.2s ease-in-out infinite}
.rw-rack-rise{animation:rw-rack-rise 3.4s ease-in infinite}.rw-rack-r2{animation-delay:-1.2s}.rw-rack-r3{animation-delay:-2.3s}
.rw-rack-hum{transform-origin:50% 50%;animation:rw-rack-hum 1.8s ease-in-out infinite}
.rw-rack-sweep{animation:rw-rack-sweep 5s ease-in-out infinite}
.rw-rack-o1{transform-origin:32px 14px}.rw-rack-o2{transform-origin:32px 26px}.rw-rack-o3{transform-origin:30px 54px}.rw-rack-o4{transform-origin:32px 32px}
@keyframes rw-rack-sway{0%,100%{rotate:calc(-1.6deg * var(--rw-rack-amp))}50%{rotate:calc(1.6deg * var(--rw-rack-amp))}}
@keyframes rw-rack-bob{0%,100%{translate:0 calc(-.6px * var(--rw-rack-amp))}50%{translate:0 calc(.6px * var(--rw-rack-amp))}}
@keyframes rw-rack-spin{to{rotate:360deg}}
@keyframes rw-rack-pulse{0%,100%{opacity:.55;scale:1}50%{opacity:1;scale:calc(1 + .04 * var(--rw-rack-amp))}}
@keyframes rw-rack-rise{0%{translate:0 0;opacity:0}20%{opacity:1}100%{translate:0 calc(-5px * var(--rw-rack-amp));opacity:0}}
@keyframes rw-rack-hum{0%,100%{scale:1 1}50%{scale:calc(1 + .015 * var(--rw-rack-amp)) 1}}
@keyframes rw-rack-sweep{0%,60%,100%{translate:calc(-4px * var(--rw-rack-amp)) 0;opacity:0}75%{opacity:.95}90%{translate:calc(4px * var(--rw-rack-amp)) 0;opacity:0}}
@media (prefers-reduced-motion:reduce){.rw-rack-m{animation:none!important}}

/* the quiet states: earned by play glows; bought is filled */
.rw-rack__tile[data-state="free"]{border-color:color-mix(in srgb,var(--pc,var(--rose)) 60%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pc,var(--rose)) 25%,transparent),0 0 14px color-mix(in srgb,var(--pc,var(--rose)) 28%,transparent)}
.rw-rack__tile[data-state="complete"]{border-color:var(--pc,var(--rose))}
.rw-rack__tile[data-state="complete"] .rw-rack__lit{fill:var(--pc,var(--rose))}

.rw-rack__foot{display:flex;justify-content:flex-end}

@media (max-width:520px){.rw-rack__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.rw-rack__tile{transition:none}}