/* =========================================================
   Holder Crate visual: a neon-lit locker from the cafe
   ========================================================= */

.crate-figure {
  --crate-glow: var(--sign);
  position: relative;
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
}
.crate-figure__glow {
  position: absolute;
  inset: 10% 8% 18%;
  z-index: -1;
  border-radius: 40%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--crate-glow) 26%, transparent), transparent 75%);
  filter: blur(18px);
  transition: background .5s var(--ease);
}

.crate-svg {
  width: 100%;
  height: auto;
  color: var(--crate-glow);
  overflow: visible;
}
.crate-svg text { font-family: var(--font-mono); }

.crate-svg .tube { stroke: var(--crate-glow); opacity: .75; transition: stroke .5s var(--ease); }

.crate-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; fill: var(--muted); }
.crate-label--accent { fill: var(--crate-glow); transition: fill .5s; }
.crate-micro { font-size: 9.5px; letter-spacing: .14em; fill: var(--dim); font-weight: 500; }
.crate-micro--dim { fill: #7b6f98; font-size: 9px; }

/* class sign pips: letters keep meaning without colour */
.pip rect { fill: #120c20; stroke: #3b2e5a; stroke-width: 1.4; transition: fill .35s var(--ease), stroke .35s; }
.pip text { font-size: 11px; font-weight: 700; fill: #6d6189; transition: fill .35s; }
.pip.is-on rect { fill: var(--crate-glow); stroke: var(--crate-glow); }
.pip.is-on text { fill: #160c1c; }
.pip.is-current rect { filter: drop-shadow(0 0 6px var(--crate-glow)); }

/* lock badge (pre-connection) */
.lock-badge rect, .lock-badge path { stroke: var(--sign); }
.lock-badge > rect:first-child { stroke: var(--sign); filter: drop-shadow(0 0 10px rgba(255, 95, 174, .45)); }
.lock-badge__title { font-size: 17px; font-weight: 700; letter-spacing: .16em; fill: var(--text); }
.lock-badge__sub { font-size: 10.5px; letter-spacing: .08em; fill: var(--muted); }

/* hero scan line: the system polling for wallet state */
.crate-svg--hero .scan {
  transform-box: view-box;
  animation: crateScan 4.8s var(--ease) infinite;
}
@keyframes crateScan {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(206px); opacity: 1; }
  60%  { opacity: 0; }
  100% { transform: translateY(206px); opacity: 0; }
}
.crate-svg--hero .lock-badge { animation: badgePulse 3.2s ease-in-out infinite; }
@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .82; }
}

/* preview cells */
.cell rect { fill: transparent; stroke: #3b2e5a; stroke-width: 1.5; transition: fill .3s var(--ease), stroke .3s, fill-opacity .3s; }
.cell path { stroke: #3b2e5a; stroke-width: 1.6; stroke-linecap: round; transition: stroke .3s; }
.cell.is-on rect { fill: var(--crate-glow); fill-opacity: var(--cell-alpha, .85); stroke: var(--crate-glow); }
.cell.is-on path { stroke: #160c1c; }
.has-cells .cells-fallback { display: none; }

.gauge-fill { fill: var(--crate-glow); transition: y .35s var(--ease), height .35s var(--ease), fill .5s; }
.tick { fill: #251b3e; transition: fill .3s var(--ease); }
.tick.is-on { fill: var(--crate-glow); }

/* tier light colours */
[data-tier="copper"]   { --crate-glow: var(--copper); }
[data-tier="bronze"]   { --crate-glow: var(--bronze); }
[data-tier="silver"]   { --crate-glow: var(--silver); }
[data-tier="gold"]     { --crate-glow: var(--gold); }
[data-tier="platinum"] { --crate-glow: var(--platinum); }
[data-tier="empty"]    { --crate-glow: #5b4d7d; }

.crate-caption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 12px;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}
.crate-caption strong { color: var(--text); }