/* ── Hero mini-animation keyframes ────────────────────────────────────── */
@keyframes pulse-q {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
  50%       { box-shadow: 0 0 12px 4px rgba(99,102,241,0.45); }
}
@keyframes pulse-k {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
  50%       { box-shadow: 0 0 12px 4px rgba(52,211,153,0.4); }
}
@keyframes pulse-v {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
  50%       { box-shadow: 0 0 12px 4px rgba(251,191,36,0.35); }
}

@keyframes flow-down {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1); transform-origin: top; }
}
@keyframes flow-up {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

/* HBM tile "sliding" highlight keyframe (used by the step animation in main.js
   via CSS class toggles; base transition rules.) */
.hbm-tile  { transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                         background 0.4s,
                         border-color 0.4s; }
.sram-tile { transition: background 0.4s, border 0.4s; }