/*!
 * blockies-chip — recessed metallic chip emblem
 * https://github.com/russfranky/blockies-chip
 *
 * Drop into a dark surface. Three layers, in order:
 *   1. .chip-wrap   — the recessed frame (inset shadows + darkening bg)
 *   2. .chip-emblem — holographic foil masked through the Blockies pixel grid
 *   3. ::after sheen — implies a transparent laminate above the chip
 *
 * Override the size by setting --chip-size on .chip-wrap (default 96px).
 */

.chip-wrap{
  --chip-size: 96px;
  --chip-radius: 7px;
  --chip-pad: 6px;

  position: relative;
  width: var(--chip-size);
  height: var(--chip-size);
  border-radius: var(--chip-radius);
  pointer-events: none;

  /* recessed-into-surface: darkening gradient + dual inset shadows + thin border */
  background: linear-gradient(165deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 100%);
  border: 0.5px solid rgba(0,0,0,0.5);
  box-shadow:
    inset 2px 2px 4px rgba(0,0,0,0.7),
    inset -1px -1px 2px rgba(255,255,255,0.035),
    0 1px 0 rgba(255,255,255,0.03);
}

/* Laminate sheen: a transparent layer "above" the chip */
.chip-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.02) 0%,
    transparent 40%,
    rgba(0,0,0,0.06) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* The emblem itself — holographic foil masked through the Blockies grid */
.chip-emblem{
  position: absolute;
  inset: var(--chip-pad);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
  transform: rotate(-90deg);

  /* champagne / copper / slate / blush — the Visa Black Card hologram palette */
  background: conic-gradient(
    from var(--chip-shine-angle, 0deg) at 50% 50%,
    #c2b6a0 0%,
    #d9c8a8 8%,
    #a98a78 18%,
    #6b7b8c 32%,
    #b9aec2 44%,
    #c2b6a0 56%,
    #d9c8a8 68%,
    #6b7b8c 80%,
    #a98a78 92%,
    #c2b6a0 100%
  );

  /* Mask defaults to solid; JS replaces it with the wallet's Blockies grid */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><rect width='8' height='8' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><rect width='8' height='8' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;

  opacity: 0.55;
  filter: saturate(0.5) brightness(0.82);
  transition: opacity 0.4s ease;
}

.chip-wrap:hover .chip-emblem{ opacity: 0.78; }

@media (prefers-reduced-motion: reduce){
  .chip-emblem{ transition: none; }
}