/* Platform slabs (layers.js): base drawing, then the plate look shared with
   the token stack: step-tinted sides, lit edges and a glyph-dot texture on
   the active slab. Strokes stay 1px despite the iso transform. */
.layer svg * { vector-effect: non-scaling-stroke; stroke-width: 1; fill: none; stroke: #3d3c38; transition: stroke 0.4s, fill 0.4s; }
.layer .top { fill: #0e0e0d; }
.layer .side--l { fill: #121211; }
.layer .side--r { fill: #090908; }
.layer .solid { fill: #050505; }
.layer .hatch { fill: #161615; }
.layer .core { fill: #000; }
.layer .bar { stroke-width: 6; stroke-linecap: round; stroke: #2a2927; }
.layer.is-active svg * { stroke: #8f8d86; }
.layer.is-active .bar { stroke: #6d6b65; }
.layer.is-active .accent { stroke: var(--step-color); }
.layer.is-active .accent-fill { fill: color-mix(in srgb, var(--step-color) 22%, #000); stroke: var(--step-color); }
/* buy face: one tile per stock in its hero colour, empty slots for what's next */
.layer .slot { stroke-dasharray: 3 4; }
.layer .tile { fill: #050505; }
.layer .tile-line { stroke-linejoin: round; stroke-linecap: round; }
.tile--spcx, .tile-line--spcx { --stock: var(--stock-spcx); }
.tile--meta, .tile-line--meta { --stock: var(--stock-meta); }
.tile--nvda, .tile-line--nvda { --stock: var(--stock-nvda); }
.tile--baba, .tile-line--baba { --stock: var(--stock-baba); }
.tile--skhy, .tile-line--skhy { --stock: var(--stock-skhy); }
.layer.is-active .tile { fill: color-mix(in srgb, var(--stock) 16%, #000); stroke: var(--stock); }
.layer.is-active .tile-line { stroke: var(--stock); }
.layer.is-active .slot { stroke: #5a5853; }


/* plate look on the active slab */
.layer.is-active .top { fill: color-mix(in srgb, var(--step-color) 7%, #0b0b0a); stroke: var(--step-color); }
.layer.is-active .side { stroke: color-mix(in srgb, var(--step-color) 45%, #000); }
.layer.is-active .side--l { fill: color-mix(in srgb, var(--step-color) 10%, #121211); }
.layer.is-active .side--r { fill: color-mix(in srgb, var(--step-color) 6%, #090908); }
.layer .dots { opacity: 0; transition: opacity 0.5s; }
.layer.is-active .dots { opacity: 0.16; }
.layer .dot { fill: var(--step-color); }

/* own: the holders' stack, plates dropping onto the slab one by one */
.layer .plate { --c: var(--stock-baba); opacity: 0; transform: translateY(-28px); }
.layer .plate--spcx { --c: var(--stock-spcx); }
.layer .plate--meta { --c: var(--stock-meta); }
.layer .plate--nvda { --c: var(--stock-nvda); }
.layer .plate--skhy { --c: var(--stock-skhy); }
.layer.is-active .plate {
  opacity: 1;
  transform: none;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s;
  transition-delay: calc(250ms + var(--k) * 90ms);
}
.layer .plate .plate__top { fill: #0e0e0d; stroke: color-mix(in srgb, var(--c) 45%, #000); }
.layer .plate .plate__side { stroke: color-mix(in srgb, var(--c) 45%, #000); }
.layer .plate .plate__side--l { fill: color-mix(in srgb, var(--c) 10%, #121211); }
.layer .plate .plate__side--r { fill: color-mix(in srgb, var(--c) 6%, #090908); }
.layer .plate.is-top .plate__top { fill: color-mix(in srgb, var(--c) 14%, #000); stroke: var(--c); }
.layer .plate__dots { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .layer .plate, .layer.is-active .plate { transition: none; }
}
/* textures are fills only; outrank the blanket `.layer.is-active svg *` stroke */
.layer svg :is(.dots, .dot, .plate__dots, .plate-dot) { stroke: none; }