CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

/* Staggered fade-up */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-item {
  animation: fadeUp 0.55s cubic-bezier(0.16,1,0.3,1) backwards;
}

.fade-item:nth-child(1) { animation-delay: 0.05s; }
.fade-item:nth-child(2) { animation-delay: 0.10s; }
.fade-item:nth-child(3) { animation-delay: 0.15s; }
.fade-item:nth-child(4) { animation-delay: 0.20s; }