/* packs — one clean grid: the previews are the color, everything else is hairline and type.
   Wide screens: the grid is pinned and a flat brush paints it in, then paints it back out with primer. */
#packs .packs-head{margin-bottom:clamp(44px,6vw,72px)}
#packs .packs-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,40px) clamp(18px,2.4vw,28px)}
#packs .packs-card{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
#packs .packs-card.in{opacity:1;transform:none}
#packs .packs-card a{display:block}
#packs .packs-stage{margin:0;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--night2);border:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
#packs .packs-stage img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
#packs .packs-mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);gap:clamp(6px,1vw,12px);padding:clamp(12px,2vw,22px);background:var(--night)}
#packs .packs-mosaic img{object-fit:contain;min-width:0;min-height:0;opacity:.9;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
#packs .packs-card a:hover .packs-mosaic img{transform:none}
#packs .packs-card a:hover .packs-stage img{transform:scale(1.045)}
#packs .packs-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:14px}
#packs .packs-name{font:500 16.5px/1.3 var(--sans);letter-spacing:-.015em;margin:0}
#packs .packs-count{font:400 12.5px var(--mono);color:var(--mute);white-space:nowrap}
#packs .packs-style{margin:3px 0 0;font-size:14px;color:var(--mute)}
#packs .packs-card a:hover .packs-name{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
#packs .packs-more{margin:clamp(36px,5vw,56px) 0 0}

/* ---------- painted scene (class set by packs.js on wide, motion-ok screens) ---------- */
#packs .packs-paint,#packs .packs-brush{display:none}
#packs.is-scene .packs-head{margin-bottom:0}
#packs.is-scene .packs-track{height:300vh;position:relative}
#packs.is-scene .packs-pin{position:sticky;top:60px;height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center}
#packs.is-scene .packs-canvas{position:relative;width:100%;display:flex;justify-content:center}
#packs.is-scene .packs-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 22px;flex:none}
#packs.is-scene .packs-card{width:var(--cw,240px);opacity:1;transform:none;transition:none}
#packs.is-scene .packs-meta{display:block;margin-top:11px}
#packs.is-scene .packs-name{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#packs.is-scene .packs-count{display:block;margin-top:1px;font-size:11.5px}
#packs.is-scene .packs-style{margin-top:2px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#packs.is-scene .packs-grid.is-covered{pointer-events:none}
#packs.is-scene .packs-more{margin-top:0}

#packs.is-scene .packs-paint{display:block;max-width:none;position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:2}
#packs.is-scene .packs-brush{display:block;position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:3}
#packs .pb-b,#packs .pb-sh{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#packs .pb-sh{opacity:.3}
#packs .packs-brush svg{position:absolute;overflow:visible;display:block;max-width:none;max-height:none}
#packs .pb-load{transition:opacity .25s linear}
#packs .pb-b[data-load="paint"] .pb-cream,#packs .pb-b[data-load="erase"] .pb-blue{opacity:0}
#packs .pb-stamp{transform-box:fill-box;transform-origin:center}
#packs .pb-b[data-dir="-1"] .pb-stamp{transform:scaleX(-1)}

@media (max-width:900px){#packs .packs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){#packs .packs-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#packs .packs-card{opacity:1;transform:none;transition:none}}