/* ============================================================================
   Storage Signal Mark — "Pulse Heatmap" brand motif
   ----------------------------------------------------------------------------
   A 21-cell diamond "heatmap bloom" that pulses center -> edge on a 3s infinite
   radial wave. Cells use `fill: currentColor`, so the host element sets the tint
   via `color:` (DealIQ tints with var(--accent) so it follows the active theme).

   Usage:
     <span class="ss-mark" style="color:var(--accent)">
       ...inline SVG built by storageSignalMarkSVG()...
     </span>

   Variants:
     - animated (default): radial pulse wave
     - .ss-mark--static / static SVG: opacities baked, no animation (favicons/loaders)

   Honors prefers-reduced-motion (holds at --base).
   ============================================================================ */

@keyframes ssPulse {
  0%   { opacity: var(--base); }
  12%  { opacity: calc(var(--base) * 0.4); }
  30%  { opacity: var(--base); }
  100% { opacity: var(--base); }
}

.ss-mark {
  display: inline-flex;
  line-height: 0;
  color: currentColor; /* host overrides, e.g. style="color:var(--accent)" */
}

.ss-mark svg { display: block; }

/* Cells fill with the host's currentColor so the mark follows the theme accent. */
.ss-mark .ss-cell {
  fill: currentColor;
  opacity: var(--base);
}

/* Animated cells: each cell runs the pulse, offset by its ring delay. */
.ss-mark:not(.ss-mark--static) .ss-cell {
  animation: ssPulse 3s ease-in-out infinite;
}

/* Tier baselines — how "hot" a cell sits at rest. */
.ss-mark .ss-tier-1 { --base: 1;    }
.ss-mark .ss-tier-2 { --base: 0.65; }
.ss-mark .ss-tier-3 { --base: 0.45; }
.ss-mark .ss-tier-4 { --base: 0.18; }

/* Ring delays — the radial wave travels center (ring 0) outward (ring 3). */
.ss-mark .ss-ring-0 { animation-delay: 0s;    }
.ss-mark .ss-ring-1 { animation-delay: 0.15s; }
.ss-mark .ss-ring-2 { animation-delay: 0.3s;  }
.ss-mark .ss-ring-3 { animation-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .ss-mark .ss-cell {
    animation: none !important;
    opacity: var(--base);
  }
}